feat: 初始化
This commit is contained in:
George
316
uni_modules/uni-ui/components/uni-data-checkbox/clientdb.js
Normal file
316
uni_modules/uni-ui/components/uni-data-checkbox/clientdb.js
Normal file
@ -0,0 +1,316 @@
|
||||
|
||||
const events = {
|
||||
load: 'load',
|
||||
error: 'error'
|
||||
}
|
||||
const pageMode = {
|
||||
add: 'add',
|
||||
replace: 'replace'
|
||||
}
|
||||
|
||||
const attrs = [
|
||||
'pageCurrent',
|
||||
'pageSize',
|
||||
'collection',
|
||||
'action',
|
||||
'field',
|
||||
'getcount',
|
||||
'orderby',
|
||||
'where'
|
||||
]
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
listData: this.getone ? {} : [],
|
||||
paginationInternal: {
|
||||
current: this.pageCurrent,
|
||||
size: this.pageSize,
|
||||
count: 0
|
||||
},
|
||||
errorMessage: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let db = null;
|
||||
let dbCmd = null;
|
||||
|
||||
if(this.collection){
|
||||
this.db = uniCloud.database();
|
||||
this.dbCmd = this.db.command;
|
||||
}
|
||||
|
||||
this._isEnded = false
|
||||
|
||||
this.$watch(() => {
|
||||
var al = []
|
||||
attrs.forEach(key => {
|
||||
al.push(this[key])
|
||||
})
|
||||
return al
|
||||
}, (newValue, oldValue) => {
|
||||
this.paginationInternal.pageSize = this.pageSize
|
||||
|
||||
let needReset = false
|
||||
for (let i = 2; i < newValue.length; i++) {
|
||||
if (newValue[i] != oldValue[i]) {
|
||||
needReset = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (needReset) {
|
||||
this.clear()
|
||||
this.reset()
|
||||
}
|
||||
if (newValue[0] != oldValue[0]) {
|
||||
this.paginationInternal.current = this.pageCurrent
|
||||
}
|
||||
|
||||
this._execLoadData()
|
||||
})
|
||||
|
||||
// #ifdef H5
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
this._debugDataList = []
|
||||
if (!window.unidev) {
|
||||
window.unidev = {
|
||||
clientDB: {
|
||||
data: []
|
||||
}
|
||||
}
|
||||
}
|
||||
unidev.clientDB.data.push(this._debugDataList)
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-TOUTIAO
|
||||
let changeName
|
||||
let events = this.$scope.dataset.eventOpts
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
let event = events[i]
|
||||
if (event[0].includes('^load')) {
|
||||
changeName = event[1][0][0]
|
||||
}
|
||||
}
|
||||
if (changeName) {
|
||||
let parent = this.$parent
|
||||
let maxDepth = 16
|
||||
this._changeDataFunction = null
|
||||
while (parent && maxDepth > 0) {
|
||||
let fun = parent[changeName]
|
||||
if (fun && typeof fun === 'function') {
|
||||
this._changeDataFunction = fun
|
||||
maxDepth = 0
|
||||
break
|
||||
}
|
||||
parent = parent.$parent
|
||||
maxDepth--;
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
||||
// if (!this.manual) {
|
||||
// this.loadData()
|
||||
// }
|
||||
},
|
||||
// #ifdef H5
|
||||
beforeDestroy() {
|
||||
if (process.env.NODE_ENV === 'development' && window.unidev) {
|
||||
var cd = this._debugDataList
|
||||
var dl = unidev.clientDB.data
|
||||
for (var i = dl.length - 1; i >= 0; i--) {
|
||||
if (dl[i] === cd) {
|
||||
dl.splice(i, 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
loadData(args1, args2) {
|
||||
let callback = null
|
||||
if (typeof args1 === 'object') {
|
||||
if (args1.clear) {
|
||||
this.clear()
|
||||
this.reset()
|
||||
}
|
||||
if (args1.current !== undefined) {
|
||||
this.paginationInternal.current = args1.current
|
||||
}
|
||||
if (typeof args2 === 'function') {
|
||||
callback = args2
|
||||
}
|
||||
} else if (typeof args1 === 'function') {
|
||||
callback = args1
|
||||
}
|
||||
|
||||
this._execLoadData(callback)
|
||||
},
|
||||
loadMore() {
|
||||
if (this._isEnded) {
|
||||
return
|
||||
}
|
||||
this._execLoadData()
|
||||
},
|
||||
refresh() {
|
||||
this.clear()
|
||||
this._execLoadData()
|
||||
},
|
||||
clear() {
|
||||
this._isEnded = false
|
||||
this.listData = []
|
||||
},
|
||||
reset() {
|
||||
this.paginationInternal.current = 1
|
||||
},
|
||||
remove(id, {
|
||||
action,
|
||||
callback,
|
||||
confirmTitle,
|
||||
confirmContent
|
||||
} = {}) {
|
||||
if (!id || !id.length) {
|
||||
return
|
||||
}
|
||||
uni.showModal({
|
||||
title: confirmTitle || '提示',
|
||||
content: confirmContent || '是否删除该数据',
|
||||
showCancel: true,
|
||||
success: (res) => {
|
||||
if (!res.confirm) {
|
||||
return
|
||||
}
|
||||
this._execRemove(id, action, callback)
|
||||
}
|
||||
})
|
||||
},
|
||||
_execLoadData(callback) {
|
||||
if (this.loading) {
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
this.errorMessage = ''
|
||||
|
||||
this._getExec().then((res) => {
|
||||
this.loading = false
|
||||
const {
|
||||
data,
|
||||
count
|
||||
} = res.result
|
||||
this._isEnded = data.length < this.pageSize
|
||||
|
||||
callback && callback(data, this._isEnded)
|
||||
this._dispatchEvent(events.load, data)
|
||||
|
||||
if (this.getone) {
|
||||
this.listData = data.length ? data[0] : undefined
|
||||
} else if (this.pageData === pageMode.add) {
|
||||
this.listData.push(...data)
|
||||
if (this.listData.length) {
|
||||
this.paginationInternal.current++
|
||||
}
|
||||
} else if (this.pageData === pageMode.replace) {
|
||||
this.listData = data
|
||||
this.paginationInternal.count = count
|
||||
}
|
||||
|
||||
// #ifdef H5
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
this._debugDataList.length = 0
|
||||
this._debugDataList.push(...JSON.parse(JSON.stringify(this.listData)))
|
||||
}
|
||||
// #endif
|
||||
}).catch((err) => {
|
||||
this.loading = false
|
||||
this.errorMessage = err
|
||||
callback && callback()
|
||||
this.$emit(events.error, err)
|
||||
})
|
||||
},
|
||||
_getExec() {
|
||||
let exec = this.db
|
||||
if (this.action) {
|
||||
exec = exec.action(this.action)
|
||||
}
|
||||
|
||||
exec = exec.collection(this.collection)
|
||||
|
||||
if (!(!this.where || !Object.keys(this.where).length)) {
|
||||
exec = exec.where(this.where)
|
||||
}
|
||||
if (this.field) {
|
||||
exec = exec.field(this.field)
|
||||
}
|
||||
if (this.orderby) {
|
||||
exec = exec.orderBy(this.orderby)
|
||||
}
|
||||
|
||||
const {
|
||||
current,
|
||||
size
|
||||
} = this.paginationInternal
|
||||
exec = exec.skip(size * (current - 1)).limit(size).get({
|
||||
getCount: this.getcount
|
||||
})
|
||||
|
||||
return exec
|
||||
},
|
||||
_execRemove(id, action, callback) {
|
||||
if (!this.collection || !id) {
|
||||
return
|
||||
}
|
||||
|
||||
const ids = Array.isArray(id) ? id : [id]
|
||||
if (!ids.length) {
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
mask: true
|
||||
})
|
||||
|
||||
let exec = this.db
|
||||
if (action) {
|
||||
exec = exec.action(action)
|
||||
}
|
||||
|
||||
exec.collection(this.collection).where({
|
||||
_id: dbCmd.in(ids)
|
||||
}).remove().then((res) => {
|
||||
callback && callback(res.result)
|
||||
if (this.pageData === pageMode.replace) {
|
||||
this.refresh()
|
||||
} else {
|
||||
this.removeData(ids)
|
||||
}
|
||||
}).catch((err) => {
|
||||
uni.showModal({
|
||||
content: err.message,
|
||||
showCancel: false
|
||||
})
|
||||
}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
removeData(ids) {
|
||||
let il = ids.slice(0)
|
||||
let dl = this.listData
|
||||
for (let i = dl.length - 1; i >= 0; i--) {
|
||||
let index = il.indexOf(dl[i]._id)
|
||||
if (index >= 0) {
|
||||
dl.splice(i, 1)
|
||||
il.splice(index, 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
_dispatchEvent(type, data) {
|
||||
if (this._changeDataFunction) {
|
||||
this._changeDataFunction(data, this._isEnded)
|
||||
} else {
|
||||
this.$emit(type, data, this._isEnded)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,826 @@
|
||||
<template>
|
||||
<view class="uni-data-checklist">
|
||||
<template v-if="loading">
|
||||
<view class="uni-data-loading">
|
||||
<uni-load-more status="loading" iconType="snow" :iconSize="18" :content-text="contentText"></uni-load-more>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="chagne">
|
||||
<label class="checklist-box" :class="item.labelClass" :style="[item.styleBackgroud]" v-for="(item,index) in dataList"
|
||||
:key="index">
|
||||
<checkbox class="hidden" hidden :disabled="!!item.disabled" :value="item.value+''" :checked="item.selected" />
|
||||
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="checkbox__inner"
|
||||
:class="item.checkboxBgClass" :style="[item.styleIcon]">
|
||||
<view class="checkbox__inner-icon" :class="item.checkboxClass"></view>
|
||||
</view>
|
||||
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
|
||||
<text class="checklist-text" :class="item.textClass" :style="[item.styleIconText]">{{item.text}}</text>
|
||||
<view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :class="item.listClass" :style="[item.styleBackgroud]"></view>
|
||||
</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
<radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="chagne">
|
||||
<label class="checklist-box" :class="item.labelClass" :style="[item.styleBackgroud]" v-for="(item,index) in dataList" :key="index">
|
||||
<radio hidden :disabled="item.disabled" :value="item.value+''" :checked="item.selected" />
|
||||
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner"
|
||||
:class="item.checkboxBgClass" :style="[item.styleBackgroud]">
|
||||
<view class="radio__inner-icon" :class="item.checkboxClass" :style="[item.styleIcon]"></view>
|
||||
</view>
|
||||
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
|
||||
<text class="checklist-text" :class="item.textClass" :style="[item.styleIconText]">{{item.text}}</text>
|
||||
<view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :class="item.listClass" :style="[item.styleRightIcon]"></view>
|
||||
</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* DataChecklist 数据选择器
|
||||
* @description 通过数据渲染 checkbox 和 radio
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
|
||||
* @property {String} mode = [default| list | button | tag] 显示模式
|
||||
* @value default 默认横排模式
|
||||
* @value list 列表模式
|
||||
* @value button 按钮模式
|
||||
* @value tag 标签模式
|
||||
* @property {Boolean} multiple = [true|false] 是否多选
|
||||
* @property {Array|String|Number} value 默认值
|
||||
* @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
|
||||
* @property {Number|String} min 最小选择个数 ，multiple为true时生效
|
||||
* @property {Number|String} max 最大选择个数 ，multiple为true时生效
|
||||
* @property {Boolean} wrap 是否换行显示
|
||||
* @property {String} icon = [left|right] list 列表模式下icon显示位置
|
||||
* @property {Boolean} selectedColor 选中颜色
|
||||
* @property {Boolean} selectedTextColor 选中文本颜色，如不填写则自动显示
|
||||
* @value left 左侧显示
|
||||
* @value right 右侧显示
|
||||
* @event {Function} change 选中发生变化触发
|
||||
*/
|
||||
|
||||
import clientdb from './clientdb.js'
|
||||
export default {
|
||||
name: 'uniDataChecklist',
|
||||
mixins: [clientdb],
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: [Array, String, Number],
|
||||
default () {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
localdata: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
min: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
max: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
wrap: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
selectedColor:{
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
selectedTextColor:{
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// clientDB 相关
|
||||
options: {
|
||||
type: [Object, Array],
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
collection: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
action: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
field: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
pageData: {
|
||||
type: String,
|
||||
default: 'add'
|
||||
},
|
||||
pageCurrent: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
getcount: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
orderby: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
where: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
},
|
||||
getone: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
manual: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
localdata: {
|
||||
handler(newVal) {
|
||||
this.range = newVal
|
||||
this.dataList = this.getDataList(this.getSelectedValue(newVal))
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
|
||||
listData(newVal) {
|
||||
this.range = newVal
|
||||
this.dataList = this.getDataList(this.getSelectedValue(newVal))
|
||||
},
|
||||
value(newVal) {
|
||||
this.dataList = this.getDataList(newVal)
|
||||
this.formItem && this.formItem.setValue(newVal)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [],
|
||||
range: [],
|
||||
contentText: {
|
||||
contentdown: '查看更多',
|
||||
contentrefresh: '加载中',
|
||||
contentnomore: '没有更多'
|
||||
},
|
||||
styles: {
|
||||
selectedColor: '#007aff',
|
||||
selectedTextColor: '#333',
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.form = this.getForm('uniForms')
|
||||
this.formItem = this.getForm('uniFormsItem')
|
||||
this.formItem && this.formItem.setValue(this.value)
|
||||
this.styles = {
|
||||
selectedColor: this.selectedColor,
|
||||
selectedTextColor: this.selectedTextColor
|
||||
}
|
||||
|
||||
if (this.formItem) {
|
||||
if (this.formItem.name) {
|
||||
this.rename = this.formItem.name
|
||||
this.form.inputChildrens.push(this)
|
||||
}
|
||||
}
|
||||
|
||||
if (this.localdata && this.localdata.length !== 0) {
|
||||
this.range = this.localdata
|
||||
this.dataList = this.getDataList(this.getSelectedValue(this.range))
|
||||
} else {
|
||||
if (this.collection) {
|
||||
this.loadData()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(range) {},
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getForm(name = 'uniForms') {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
},
|
||||
chagne(e) {
|
||||
const values = e.detail.value
|
||||
|
||||
let detail = {
|
||||
value: [],
|
||||
data: []
|
||||
}
|
||||
|
||||
if (this.multiple) {
|
||||
this.range.forEach(item => {
|
||||
if (values.includes(item.value + '')) {
|
||||
detail.value.push(item.value)
|
||||
detail.data.push(item)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
const range = this.range.find(item => (item.value + '') === values)
|
||||
if (range) {
|
||||
detail = {
|
||||
value: range.value,
|
||||
data: range
|
||||
}
|
||||
}
|
||||
}
|
||||
this.formItem && this.formItem.setValue(detail.value)
|
||||
this.$emit('input', detail.value)
|
||||
this.$emit('change', {
|
||||
detail
|
||||
})
|
||||
if (this.multiple) {
|
||||
// 如果 v-model 没有绑定 ，则走内部逻辑
|
||||
// if (this.value.length === 0) {
|
||||
this.dataList = this.getDataList(detail.value, true)
|
||||
// }
|
||||
} else {
|
||||
this.dataList = this.getDataList(detail.value)
|
||||
}
|
||||
},
|
||||
getLabelClass(item, index) {
|
||||
let classes = []
|
||||
switch (this.mode) {
|
||||
case 'default':
|
||||
item.disabled && classes.push('disabled-cursor')
|
||||
break
|
||||
case 'button':
|
||||
classes.push(...['is-button', ...this.getClasses(item, 'button')])
|
||||
break
|
||||
case 'list':
|
||||
if (this.multiple) {
|
||||
classes.push('is-list-multiple-box')
|
||||
} else {
|
||||
classes.push('is-list-box')
|
||||
}
|
||||
item.disabled && classes.push('is-list-disabled')
|
||||
index !== 0 && classes.push('is-list-border')
|
||||
break
|
||||
case 'tag':
|
||||
classes.push(...['is-tag', ...this.getClasses(item, 'tag')])
|
||||
break
|
||||
}
|
||||
classes = classes.join(' ')
|
||||
return classes
|
||||
},
|
||||
getCheckboxClass(item, type = '') {
|
||||
let classes = []
|
||||
if (this.multiple) {
|
||||
classes.push(...this.getClasses(item, 'default-multiple', type))
|
||||
} else {
|
||||
classes.push(...this.getClasses(item, 'default', type))
|
||||
}
|
||||
classes = classes.join(' ')
|
||||
return classes
|
||||
},
|
||||
getTextClass(item) {
|
||||
let classes = []
|
||||
switch (this.mode) {
|
||||
case 'default':
|
||||
classes.push(...this.getClasses(item, 'list'))
|
||||
break
|
||||
case 'button':
|
||||
classes.push(...this.getClasses(item, 'list'))
|
||||
break
|
||||
case 'list':
|
||||
classes.push(...this.getClasses(item, 'list'))
|
||||
break
|
||||
case 'tag':
|
||||
classes.push(...['is-tag-text', ...this.getClasses(item, 'tag-text')])
|
||||
break
|
||||
}
|
||||
classes = classes.join(' ')
|
||||
return classes
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取渲染的新数组
|
||||
* @param {Object} value 选中内容
|
||||
*/
|
||||
getDataList(value) {
|
||||
// 解除引用关系，破坏原引用关系，避免污染源数据
|
||||
let dataList = JSON.parse(JSON.stringify(this.range))
|
||||
let list = []
|
||||
if (this.multiple) {
|
||||
if (!Array.isArray(value)) {
|
||||
value = []
|
||||
// console.error('props 类型错误');
|
||||
}
|
||||
}
|
||||
dataList.forEach((item, index) => {
|
||||
item.disabled = item.disable || item.disabled || false
|
||||
if (this.multiple) {
|
||||
if (value.length > 0) {
|
||||
let have = value.find(val => val === item.value)
|
||||
item.selected = have !== undefined
|
||||
} else {
|
||||
item.selected = false
|
||||
}
|
||||
} else {
|
||||
item.selected = value === item.value
|
||||
}
|
||||
|
||||
list.push(item)
|
||||
})
|
||||
return this.setRange(list)
|
||||
},
|
||||
/**
|
||||
* 处理最大最小值
|
||||
* @param {Object} list
|
||||
*/
|
||||
setRange(list) {
|
||||
let selectList = list.filter(item => item.selected)
|
||||
let min = Number(this.min) || 0
|
||||
let max = Number(this.max) || ''
|
||||
list.forEach((item, index) => {
|
||||
if (this.multiple) {
|
||||
if (selectList.length <= min) {
|
||||
let have = selectList.find(val => val.value === item.value)
|
||||
if (have !== undefined) {
|
||||
item.disabled = true
|
||||
}
|
||||
}
|
||||
|
||||
if (selectList.length >= max && max !== '') {
|
||||
let have = selectList.find(val => val.value === item.value)
|
||||
if (have === undefined) {
|
||||
item.disabled = true
|
||||
}
|
||||
}
|
||||
}
|
||||
this.setClass(item, index)
|
||||
list[index] = item
|
||||
})
|
||||
return list
|
||||
},
|
||||
/**
|
||||
* 设置 class
|
||||
* @param {Object} item
|
||||
* @param {Object} index
|
||||
*/
|
||||
setClass(item, index) {
|
||||
// 设置 label 的 class
|
||||
item.labelClass = this.getLabelClass(item, index)
|
||||
// 设置 checkbox外层样式
|
||||
item.checkboxBgClass = this.getCheckboxClass(item, '-bg')
|
||||
// 设置 checkbox 内层样式
|
||||
item.checkboxClass = this.getCheckboxClass(item)
|
||||
// 设置文本样式
|
||||
item.textClass = this.getTextClass(item)
|
||||
// 设置 list 对勾右侧样式
|
||||
item.listClass = this.getCheckboxClass(item, '-list')
|
||||
|
||||
// 设置自定义样式
|
||||
item.styleBackgroud = this.setStyleBackgroud(item)
|
||||
item.styleIcon = this.setStyleIcon(item)
|
||||
item.styleIconText = this.setStyleIconText(item)
|
||||
item.styleRightIcon = this.setStyleRightIcon(item)
|
||||
},
|
||||
/**
|
||||
* 获取 class
|
||||
*/
|
||||
getClasses(item, name, type = '') {
|
||||
let classes = []
|
||||
item.disabled && classes.push('is-' + name + '-disabled' + type)
|
||||
item.selected && classes.push('is-' + name + '-checked' + type)
|
||||
|
||||
if (this.mode !== 'button' || name === 'button') {
|
||||
item.selected && item.disabled && classes.push('is-' + name + '-disabled-checked' + type)
|
||||
}
|
||||
|
||||
return classes
|
||||
},
|
||||
/**
|
||||
* 获取选中值
|
||||
* @param {Object} range
|
||||
*/
|
||||
getSelectedValue(range) {
|
||||
if (!this.multiple) return this.value
|
||||
let selectedArr = []
|
||||
range.forEach((item) => {
|
||||
if (item.selected) {
|
||||
selectedArr.push(item.value)
|
||||
}
|
||||
})
|
||||
return this.value.length > 0 ? this.value : selectedArr
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置背景样式
|
||||
*/
|
||||
setStyleBackgroud(item) {
|
||||
let styles = {}
|
||||
|
||||
if (item.selected) {
|
||||
if (this.mode !== 'list') {
|
||||
styles.borderColor = this.styles.selectedColor
|
||||
}
|
||||
if (this.mode === 'tag') {
|
||||
styles.backgroundColor = this.styles.selectedColor
|
||||
}
|
||||
}
|
||||
return styles
|
||||
},
|
||||
setStyleIcon(item) {
|
||||
let styles = {}
|
||||
|
||||
if (item.selected) {
|
||||
styles.backgroundColor = this.styles.selectedColor
|
||||
styles.borderColor = this.styles.selectedColor
|
||||
}
|
||||
return styles
|
||||
},
|
||||
setStyleIconText(item) {
|
||||
let styles = {}
|
||||
if (item.selected) {
|
||||
if (this.styles.selectedTextColor) {
|
||||
styles.color = this.styles.selectedTextColor
|
||||
} else {
|
||||
if(this.mode === 'tag'){
|
||||
styles.color = '#fff'
|
||||
}else{
|
||||
styles.color = this.styles.selectedColor
|
||||
}
|
||||
}
|
||||
}
|
||||
return styles
|
||||
},
|
||||
setStyleRightIcon(item){
|
||||
let styles = {}
|
||||
if (item.selected) {
|
||||
if(this.mode === 'list'){
|
||||
styles.borderColor = this.styles.selectedColor
|
||||
}
|
||||
}
|
||||
|
||||
return styles
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-data-checklist {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
/* min-height: 36px; */
|
||||
}
|
||||
|
||||
.uni-data-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* justify-content: center; */
|
||||
height: 36px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.checklist-group {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.checklist-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 5px 0;
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.checklist-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-left: 5px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.is-button {
|
||||
margin-right: 10px;
|
||||
padding: 3px 15px;
|
||||
border: 1px #DCDFE6 solid;
|
||||
border-radius: 3px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.is-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.is-list-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
padding: 10px 15px;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.checklist-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.list-content {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.is-list-multiple-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
padding: 10px 15px;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.is-list-border {
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
|
||||
.is-tag {
|
||||
margin-right: 10px;
|
||||
padding: 3px 10px;
|
||||
border: 1px #eee solid;
|
||||
border-radius: 3px;
|
||||
background-color: #f5f5f5;
|
||||
/* transition: border-color 0.1s; */
|
||||
}
|
||||
|
||||
.is-tag-text {
|
||||
margin: 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.checkbox__inner {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
transition: border-color 0.1s;
|
||||
}
|
||||
|
||||
.checkbox__inner-icon {
|
||||
border: 1px solid #fff;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 8px;
|
||||
left: 5px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
width: 3px;
|
||||
opacity: 0;
|
||||
transition: transform .2s;
|
||||
transform-origin: center;
|
||||
transform: rotate(40deg) scaleY(0.4);
|
||||
}
|
||||
|
||||
.radio__inner {
|
||||
flex-shrink: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 16px;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
transition: border-color .3s;
|
||||
}
|
||||
|
||||
.radio__inner-icon {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 10px;
|
||||
opacity: 0;
|
||||
transition: transform .3s;
|
||||
}
|
||||
|
||||
.checkobx__list {
|
||||
border: 1px solid #fff;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 12px;
|
||||
width: 6px;
|
||||
transform-origin: center;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
|
||||
/* 禁用样式 */
|
||||
.is-default-disabled-bg {
|
||||
background-color: #F2F6FC;
|
||||
border-color: #DCDFE6;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.is-default-multiple-disabled-bg {
|
||||
background-color: #F2F6FC;
|
||||
border-color: #DCDFE6;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.is-default-disabled {
|
||||
border-color: #F2F6FC;
|
||||
}
|
||||
|
||||
.is-default-multiple-disabled {
|
||||
border-color: #F2F6FC;
|
||||
}
|
||||
|
||||
.is-list-disabled {
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.is-list-disabled-checked {
|
||||
color: #a1dcc1;
|
||||
}
|
||||
|
||||
|
||||
.is-button-disabled {
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
border-color: #EBEEF5;
|
||||
}
|
||||
|
||||
.is-button-text-disabled {
|
||||
color: #C0C4CC;
|
||||
}
|
||||
|
||||
.is-button-disabled-checked {
|
||||
border-color: #a1dcc1;
|
||||
}
|
||||
|
||||
.is-tag-disabled {
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
border-color: #e9e9eb;
|
||||
background-color: #f4f4f5;
|
||||
}
|
||||
|
||||
.is-tag-text-disabled {
|
||||
color: #bcbec2;
|
||||
}
|
||||
|
||||
/* 选中样式 */
|
||||
.is-default-checked-bg {
|
||||
border-color: #007aff;
|
||||
}
|
||||
|
||||
.is-default-multiple-checked-bg {
|
||||
border-color: #007aff;
|
||||
background-color: #007aff;
|
||||
}
|
||||
|
||||
.is-default-checked {
|
||||
opacity: 1;
|
||||
background-color: #007aff;
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
|
||||
.is-default-multiple-checked {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
|
||||
.is-default-disabled-checked-bg {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.is-default-multiple-disabled-checked-bg {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
|
||||
.is-default-checked-list {
|
||||
border-color: #007aff;
|
||||
opacity: 1;
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
|
||||
.is-default-multiple-checked-list {
|
||||
border-color: #007aff;
|
||||
opacity: 1;
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
|
||||
.is-list-disabled-checked {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.is-default-disabled-checked-list {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.is-default-multiple-disabled-checked-list {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.is-button-checked {
|
||||
border-color: #007aff;
|
||||
}
|
||||
|
||||
.is-button-disabled-checked {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.is-list-checked {
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.is-tag-checked {
|
||||
border-color: #007aff;
|
||||
background-color: #007aff;
|
||||
}
|
||||
|
||||
.is-tag-text-checked {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.is-tag-disabled-checked {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
|
||||
.disabled-cursor {
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.is-wrap {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
/* #ifdef MP-ALIPAY */
|
||||
display: none;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user