uniapp UI库 uView UI的使用 刺骨的言语ヽ痛彻心扉 2022-09-03 03:29 423阅读 0赞 ### uniapp UI库 uView UI的使用 ### * * 一、新建\`uniapp\`项目 * * 二、安装下载\`uViewUI\`组件库 * * * 方式一:\[插件市场官网\](https://ext.dcloud.net.cn/plugin?id=1593)直接下载 * 方式二、利用npm下载 * 三、修改相关配置 * 四、使用组件 * * * * 修改\`index.vue\`文件示例: * 结果展示: * 下拉框展示 * 日历展示 -------------------- ## 一、新建`uniapp`项目 ## 笔者用的Hbuilder app开发版 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70] ### 二、安装下载`uViewUI`组件库 ### > ##### 方式一:[插件市场官网][Link 1]直接下载 ##### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 1] `官网下载`解压到项目文件根目录 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 2] > ##### 方式二、利用npm下载 ##### `bash`: npm i uview-ui ## 三、修改相关配置 ## 1. `main.js`引入uView库 // main.js import uView from 'uview-ui'; Vue.use(uView); ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 3] 1. `App.vue`引入基础样式(注意style标签需声明scss属性支持) /* App.vue */ <style lang="scss"> @import "uview-ui/index.scss"; </style> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 4] 1. `uni.scss`引入全局scss变量文件 /* uni.scss */ @import "uview-ui/theme.scss"; ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 5] 1. `pages.json`配置easycom规则(按需引入) // pages.json { "easycom": { // npm安装的方式不需要前面的"@/",下载安装的方式需要"@/" // npm安装方式 "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" // 下载安装方式 // "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" }, // 此为本身已有的内容 "pages": [ // ...... ] } ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 6] ## 四、使用组件 ## 由于使用了easycom配置所以使用的时候不需要`import`组件,十分的方便直接拿来用就可以了,组件手册参考[uViewUI官网][uViewUI],下面写个案例。 ##### 修改`index.vue`文件示例: ##### 一个下拉框、一个步骤条、一个日历 <template> <view class=""> <u-dropdown> <u-dropdown-item v-model="value1" title="距离" :options="options1"></u-dropdown-item> <u-dropdown-item v-model="value2" title="温度" :options="options2"></u-dropdown-item> </u-dropdown> <u-steps :list="numList" :current="1"></u-steps> <u-calendar v-model="show" :mode="mode"></u-calendar> <u-button @click="show = true">打开</u-button> </view> </template> <script> export default { data() { return { show: false, mode: 'date', value1: 1, value2: 2, options1: [{ label: '默认排序', value: 1, }, { label: '距离优先', value: 2, }, { label: '价格优先', value: 3, } ], options2: [{ label: '去冰', value: 1, }, { label: '加冰', value: 2, }, ], numList: [{ name: '下单' }, { name: '出库' }, { name: '运输' }, { name: '签收' }, ], } }, } </script> ##### 结果展示: ##### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 7] ##### 下拉框展示 ##### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 8] ##### 日历展示 ##### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 9] > `总结:uView UI使用十分的方便、且美观可以提高效率,友友们快用起来吧` [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]: /images/20220829/a2eb4884c70b48249606ebf44590cb5a.png [Link 1]: https://ext.dcloud.net.cn/plugin?id=1593 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 1]: /images/20220829/cc21cf0830f94020b4e734a56a5ea9a3.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 2]: /images/20220829/8bff865480394440bb14aa2cb24ade27.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 3]: /images/20220829/30a7759207fc47b3beab4314cea9b42f.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 4]: /images/20220829/8170b4e9233c46a4af5fbbd40d3dab74.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 5]: /images/20220829/4f9cbd6f719346deba4a3b88880f5eb4.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 6]: /images/20220829/07fc4b03335d4b7db7b5405aa2c2230b.png [uViewUI]: https://www.uviewui.com/components/intro.html [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 7]: /images/20220829/bfbe33701656482686b82f230c199da5.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 8]: /images/20220829/9fa432717819425cbff257275f94da61.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 9]: /images/20220829/2c864900636b4667a131b9b1f5bf62e2.png
还没有评论,来说两句吧...