Commit f76fb96f authored by wlxuqu's avatar wlxuqu

1. 新增自定义主题功能和教程

2. 更新readme.md
3. 优化row组价可能存在边距错误的问题
4. button组件新增data-name参数
parent 6c668f0c
......@@ -19,6 +19,14 @@ uView UI,是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架,全
- 按需引入,精简打包体积
## 预览
您可以通过**微信**扫码,查看最佳的演示效果。
<br>
<br>
<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" >
## 友情链接
<br>
......@@ -30,12 +38,20 @@ uView UI,是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架,全
#### **pl-table** —— [ 完美解决 element 万级表格数据渲染卡顿问题](https://github.com/livelyPeng/pl-table)
<br>
## 链接
- [官方文档](https://uviewui.com/)
- [更新日志](https://uviewui.com/components/changelog.html)
- [升级指南](https://uviewui.com/components/changelog.html)
- [关于我们](https://uviewui.com/cooperation/about.html)
## 交流反馈
欢迎加入我们的QQ群交流反馈:[点此跳转](https://www.uviewui.com/components/addQQGroup.html)
## 安装
```bash
# npm方式安装
npm i uview-ui
```
#### **下载地址** —— [https://ext.dcloud.net.cn/plugin?id=1593](https://ext.dcloud.net.cn/plugin?id=1593)
## 快速上手
......@@ -66,7 +82,7 @@ Vue.use(uView);
// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
......@@ -88,26 +104,13 @@ Vue.use(uView);
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容
## 链接
- [官方文档](https://uviewui.com/)
- [更新日志](https://uviewui.com/components/changelog.html)
- [升级指南](https://uviewui.com/components/changelog.html)
- [关于我们](https://uviewui.com/cooperation/about.html)
## 预览
您可以通过**微信**扫码,查看最佳的演示效果。
<br>
<br>
<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" >
<!-- ## 捐赠uView的研发
## 捐赠uView的研发
uView文档和源码全部开源免费,如果您认为uView帮到了您的开发工作,您可以捐赠uView的研发工作,捐赠无门槛,哪怕是一杯可乐也好(相信这比打赏主播更有意义)。
<img src="https://uviewui.com/common/wechat.png" width="220" >
<img style="margin-left: 100px;" src="https://uviewui.com/common/alipay.png" width="220" >
-->
## 版权信息
uView遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议,意味着您无需支付任何费用,也无需授权,即可将uView应用到您的产品中。
......@@ -2,7 +2,7 @@
"name" : "uView",
"appid" : "__UNI__60F4B81",
"description" : "多平台快速开发的UI框架",
"versionName" : "1.3.6",
"versionName" : "1.3.8",
"versionCode" : "100",
"transformPx" : false,
"app-plus" : {
......
......@@ -2,14 +2,14 @@
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
"condition": { //模式配置,仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "test", //模式名称
"path": "pages/componentsC/test/index", //启动页面,必选
"query": "id=1&name=2" //启动参数,在页面的onLoad函数里面得到
}]
},
// "condition": { //模式配置,仅开发期间生效
// "current": 0, //当前激活的模式(list 的索引项)
// "list": [{
// "name": "test", //模式名称
// "path": "pages/componentsC/test/index", //启动页面,必选
// "query": "id=1&name=2" //启动参数,在页面的onLoad函数里面得到
// }]
// },
"pages": [
// 演示-组件
{
......
<template>
<view>
<u-checkbox-group @change="checkboxGroupChange1">
<view class="" v-for="(item, index) in list1" :key="index">
<image :src="item.image" mode=""></image>
<u-checkbox v-model="item.checked" :name="item.name">{{ item.name }}</u-checkbox>
</view>
</u-checkbox-group>
<view class="">-------------------------------------------------------------------------------------</view>
<u-checkbox-group @change="checkboxGroupChange2">
<view class="" v-for="(item, index) in list2" :key="index">
<image :src="addUrl(item.image)" mode=""></image>
<u-checkbox v-model="item.checked" :name="item.name">{{ item.name }}</u-checkbox>
</view>
</u-checkbox-group>
</view>
</template>
<script>
export default {
data() {
return {
list1: [
{
name: 'item-1',
checked: false,
image: 'https://qiniu.jieyoukj.cn/vote/2020/5/20/11:34:7/14yvkka1oqadcxr1592624047805'
},
{
name: 'item-2',
checked: false,
image: 'https://qiniu.jieyoukj.cn/vote/2020/5/20/11:34:7/14yvkka1oqadcxr1592624047805'
}
],
list2: [
{
name: 'item-1',
checked: false,
image: '/vote/2020/5/20/11:34:7/14yvkka1oqadcxr1592624047805'
},
{
name: 'item-2',
checked: false,
image: '/vote/2020/5/20/11:34:7/14yvkka1oqadcxr1592624047805'
}
]
};
},
methods: {
// 选中任一checkbox时,由checkbox-group触发
checkboxGroupChange1(e) {
console.log(e);
},
checkboxGroupChange2(e) {
console.log(e);
},
addUrl(url) {
return 'https://qiniu.jieyoukj.cn' + url;
}
}
};
</script>
<style lang="scss"></style>
......@@ -20,6 +20,7 @@
:send-message-title="sendMessageTitle"
send-message-path="sendMessagePath"
:lang="lang"
:data-name="dataName"
:session-from="sessionFrom"
:send-message-img="sendMessageImg"
:show-message-card="showMessageCard"
......@@ -32,6 +33,7 @@
@tap.stop="click($event)"
:hover-class="getHoverClass"
:loading="loading"
data-name="dataName"
>
<slot></slot>
<view
......@@ -198,6 +200,11 @@ export default {
default() {
return {};
}
},
// 额外传参参数,用于小程序的data-xxx属性,通过target.dataset.name获取
dataName: {
type: String,
default: ''
}
},
computed: {
......
<template>
<view class="u-row" :style="{
marginLeft: `-${gutter/2 + 'rpx'}`,
marginRight: `-${gutter/2 + 'rpx'}`,
alignItems: uAlignItem,
justifyContent: uJustify
}">
......
......@@ -54,7 +54,7 @@
* select 列选择器
* @description 此选择器用于单列,多列,多列联动的选择场景。(从1.3.0版本起,不建议使用Picker组件的单列和多列模式,Select组件是专门为列选择而构造的组件,更简单易用。)
* @tutorial http://uviewui.com/components/select.html
* @property {String} mode 模式选择,"single-column"-单列模式,"mutil-column"-多列模式,"single-column-auto"-多列联动模式
* @property {String} mode 模式选择,"single-column"-单列模式,"mutil-column"-多列模式,"mutil-column-auto"-多列联动模式
* @property {Array} list 列数据,数组形式,见官网说明
* @property {Boolean} v-model 布尔值变量,用于控制选择器的弹出与收起
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
......
......@@ -9,7 +9,7 @@
/* #endif */
/* 支付宝,百度,头条小程序目前读取大的本地字体文件,导致无法显示图标,故用在线加载的方式-2020-05-12 */
/* #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO */
/* #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || H5 */
@font-face {
font-family: "uicon-iconfont";
src: url('//at.alicdn.com/t/font_1529455_k9eg3z8m98');
......
......@@ -54,6 +54,8 @@ import random from './libs/function/random.js'
import trim from './libs/function/trim.js'
// toast提示,对uni.showToast的封装
import toast from './libs/function/toast.js'
// 获取父组件参数
import getParent from './libs/function/getParent.js'
// 配置信息
......@@ -83,6 +85,7 @@ const $u = {
random,
deepClone,
deepMerge,
getParent,
trim,
type: ['primary', 'success', 'error', 'warning', 'info'],
http,
......
// 获取父组件的参数,因为支付宝小程序不支持provide/inject的写法
// this.$parent在非H5中,可以准确获取到父组件,但是在H5中,需要多次this.$parent.$parent.xxx
export default function getParent(name, keys) {
let parent = this.$parent;
// 通过while历遍,这里主要是为了H5需要多层解析的问题
while (parent) {
// 父组件
if (parent.$options.name !== name) {
parent = parent.$parent;
} else {
return keys.reduce((result, key) => {
result[key] = parent[key];
return result;
}, {});
}
}
return null;
}
\ No newline at end of file
{
"name": "uview-ui",
"version": "1.3.61",
"version": "1.3.8",
"description": "uView UI,是uni-app生态优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水",
"main": "index.js",
"keywords": ["uview", "uView", "uni-app", "uni-app ui", "uniapp", "uviewui", "uview ui", "uviewUI", "uViewui", "uViewUI", "uView UI", "uni ui", "uni UI", "uniapp ui", "ui", "UI框架", "uniapp ui框架", "uniapp UI"],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment