123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310 |
- <template>
- <view @click="onclick" class=" tm-checkbox " :class="[dense?'':'pa-20',inline?'d-inline-block':'']">
- <view class=" flex-start">
- <slot name="default" :checkData="{label:label,checked:changValue}" :on="onclick">
- <view :style="{width: sizes.wk,height: sizes.wk}" class="tm-checkbox-boey relative d-inline-block"
- :class="[black?'bk':'','flex-shrink mr-10',
- changValue?'ani':'',
- changValue?color_tmeme+' border-'+(borderColor||color_tmeme)+'-a-1':'border-'+(borderColor||color_tmeme)+'-a-1',
- disabled?'grey-lighten-2 border-grey-lighten-1-a-1':'',
- round==='rounded'?'rounded':'round-'+round]">
- <view :class="[changValue?'ani_toMaxToMin_on':'']" class="absolute flex-center" style="width: 100%;height: 100%;">
- <tm-icons dense v-show="model === 'normal'" :color="disabled?'opacity-5 white':'white'" :size="sizes.gou" :name="changValue?icon:' '"></tm-icons>
- <view v-show="model === 'round'&&changValue" class=" rounded d-inline-block"
- :class="[disabled?'opacity-5 white':'white']"
- :style="{width: sizes.yuan,height: sizes.yuan}"></view>
- </view>
- </view>
- </slot>
- <view v-if="label" :class="[black?'bk':'','px-10 fulled flex-start']" :style="{minHeight: sizes.wk}" class=" tm-checkbox-boey-label ">
- <view class="flex-center fulled-height">
- <slot name="label" :label="{label:label,checked:changValue}">
- <text class=" text-size-n">{{label}}</text>
- </slot>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
-
- import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
- export default {
- components:{tmIcons},
- name: 'tm-checkbox',
- model: {
- prop: 'value',
- event: 'input'
- },
- props: {
-
- disabled: Boolean,
-
- inline:{
- type:Boolean,
- default:true
- },
-
- value: Boolean,
- color: {
- type: String,
- default: 'primary'
- },
- borderColor: {
- type: String,
- default: ''
- },
-
- model: {
- type: String,
- default: 'normal'
- },
-
- icon: {
- type: String,
- default: 'icon-check'
- },
-
- round: {
- type: String | Number,
- default: '2'
- },
-
- size: {
- type: String | Number,
- default: 38
- },
-
- dense: {
- type: Boolean | String,
- default: false
- },
-
- label: {
- type: String,
- default: ''
- },
- black: {
- type: Boolean | String,
- default: false
- },
- name: {
- type: String | Array | Object | Number,
- default: ''
- },
-
- fllowTheme:{
- type:Boolean|String,
- default:true
- }
- },
- data() {
- return {
- };
- },
- watch: {
- value: function(newval, oldval) {
- if (newval !== oldval) {
- if (!this.jiancMax()) {
- this.changValue = false;
- return;
- }
- this.change();
- }
- }
- },
- computed: {
- color_tmeme:function(){
- if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
- return this.$tm.vx.state().tmVuetify.color;
- }
- return this.color;
- },
- changValue: {
- get: function() {
- return this.value;
- },
- set: function(newValue) {
-
-
- this.$emit('input', newValue)
-
- this.$emit('update:value', newValue);
-
- }
- },
- sizes: function() {
- return {
- wk: uni.upx2px(this.size) + 'px',
- gou: uni.upx2px(this.size / 3 * 2) + 'px',
- yuan: uni.upx2px(this.size / 2) + 'px',
- }
- }
- },
- methods: {
-
- jiancMax() {
- let t= this;
- let box = [];
- let selfIndex;
- let __uid = this._uid;
-
- if(this.disabled) return false;
- function findchild(p, index) {
- let preat = p;
- if (preat.$options?.name === 'tm-checkbox') {
- if (preat.changValue) {
- box.push({
- index: index,
- value: preat.name,
- checked: preat.changValue
- })
- }
- if (preat._uid === __uid) {
- selfIndex = index;
- }
- } else {
- if (preat.$children.length > 0) {
- preat.$children.forEach(item => {
- findchild(item, index++);
- })
- }
- }
- };
- let preat = t.$tm.getParentAls('tm-groupcheckbox', t.$parent);
-
- if (preat) {
- findchild(preat, 0);
-
- if (box.length > preat.max) {
- preat.error()
- return false
- }
- }
- return true
-
- },
- onclick(e) {
- if (this.disabled) return;
- if (!this.jiancMax()) {
- return;
- }
- this.changValue = !this.changValue;
-
- },
- change() {
- let box = [];
- let selfIndex;
- let __uid = this._uid;
- function findchild(p, index) {
- let preat = p;
- if (preat.$options?.name === 'tm-checkbox') {
- if (preat.changValue) {
- box.push({
- index: index,
- value: preat.name,
- checked: preat.changValue
- })
- }
- if (preat._uid === __uid) {
- selfIndex = index;
- }
- } else {
- if (preat.$children.length > 0) {
- preat.$children.forEach(item => {
- findchild(item, index++);
- })
- }
- }
- };
- let preat = this.$tm.getParentAls('tm-groupcheckbox', this.$parent);
-
- if (preat) {
- findchild(preat, 0);
- this.$emit('change', {
- index: selfIndex,
- checked: this.changValue,
- value: this.name
- });
- preat.change(box)
- } else {
- this.$emit('change', {
- index: 0,
- checked: this.changValue,
- value: this.name
- });
- }
- }
- },
- }
- </script>
- <style lang="scss" scoped>
- .tm-checkbox{
- vertical-align: middle;
- .tm-checkbox-boey,.tm-checkbox-boey-label{
- vertical-align: middle;
- }
- .ani {
- animation: ani 0.2s linear;
- }
- .ani_toMaxToMin_on {
- animation: ani_toMaxToMin_on 0.35s ease-in-out;
- }
-
- @keyframes ani_toMaxToMin_on {
- 0% {
- transform: scale(0.3);
- opacity:0.7;
- }
-
- 50% {
- transform: scale(1.5)
- }
-
- 100% {
- transform: scale(1);
- opacity:1;
- }
- }
- @keyframes ani {
- 0% {
- transform: scale(0.9)
- }
-
- 50% {
- transform: scale(1.1)
- }
-
- 100% {
- transform: scale(0.9)
- }
- }
- }
- </style>
|