checkbox.uvue 8.8 KB
Newer Older
1
<script>
H
hdx 已提交
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
  type ItemType = {
    value : string
    name : string
    checked : boolean
  }
  export default {
    data() {
      return {
        items: [
          {
            value: 'CHN',
            name: '中国',
            checked: true,
          },
          {
            value: 'USA',
            name: '美国',
            checked: false,
          },
          {
            value: 'BRA',
            name: '巴西',
            checked: false,
          },
          {
            value: 'JPN',
            name: '日本',
            checked: false,
          },
          {
            value: 'ENG',
            name: '英国',
            checked: false,
          },
          {
            value: 'FRA',
            name: '法国',
            checked: false,
          },
        ] as ItemType[],
42
        testEvent: false,
H
hdx 已提交
43 44 45 46 47
        text: '未选中',
        wrapText: 'uni-app x,终极跨平台方案\nuts,大一统语言',
        value: [] as string[],
        disabled: true,
        checked: true,
48 49 50
        color: '#007aff',
        iconColor: '#211cfe',
        foreColor: '#ff0000',
H
hdx 已提交
51 52 53 54 55 56 57 58
        // 组件属性 autotest
        checked_boolean: false,
        disabled_boolean: false,
        color_input: "#007aff",
        backgroundColor_input: "#ffffff",
        borderColor_input: "#d1d1d1",
        activeBackgroundColor_input: "#ffffff",
        activeBorderColor_input: "#d1d1d1",
59 60
        iconColor_input: "#007aff",
        foreColor_input: '#ff0000'
H
hdx 已提交
61 62 63
      }
    },
    methods: {
64

H
hdx 已提交
65
      checkboxChange: function (e : UniCheckboxGroupChangeEvent) {
66
        // 自动化测试
67 68
        if ((e.target?.tagName ?? '') == 'CHECKBOX-GROUP' && e.type === 'change') {
          this.testEvent = true
69 70
        }

H
hdx 已提交
71 72 73 74 75 76 77 78 79 80 81
        const selectedNames : string[] = []
        this.items.forEach((item) => {
          if (e.detail.value.includes(item.value)) {
            selectedNames.push(item.name)
          }
        })
        uni.showToast({
          icon: 'none',
          title: '当前选中:' + selectedNames.join(','),
        })
      },
H
hdx 已提交
82
      testChange: function (e : UniCheckboxGroupChangeEvent) {
H
hdx 已提交
83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98
        this.value = e.detail.value
      },
      checkbox_click() { console.log("组件被点击时触发") },
      checkbox_touchstart() { console.log("手指触摸动作开始") },
      checkbox_touchmove() { console.log("手指触摸后移动") },
      checkbox_touchcancel() { console.log("手指触摸动作被打断,如来电提醒,弹窗") },
      checkbox_touchend() { console.log("手指触摸动作结束") },
      checkbox_tap() { console.log("手指触摸后马上离开") },
      checkbox_longpress() { console.log("如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。") },
      change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
      change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
      confirm_color_input(value : string) { this.color_input = value },
      confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
      confirm_borderColor_input(value : string) { this.borderColor_input = value },
      confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
      confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
99 100
      confirm_iconColor_input(value : string) { this.iconColor_input = value },
      confirm_foreColor_input(value : string) { this.foreColor_input = value }
H
hdx 已提交
101 102
    }
  }
103 104
</script>

Y
init  
yurj26 已提交
105
<template>
106
  <view class="main">
107 108
    <checkbox :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input" :iconColor="iconColor_input"
      :foreColor="foreColor_input" :backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
H
hdx 已提交
109
      :activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
110 111 112
      @click="checkbox_click" @touchstart="checkbox_touchstart" @touchmove="checkbox_touchmove"
      @touchcancel="checkbox_touchcancel" @touchend="checkbox_touchend" @tap="checkbox_tap"
      @longpress="checkbox_longpress"><text>uni-app-x</text></checkbox>
113
  </view>
DCloud-WZF's avatar
DCloud-WZF 已提交
114

雪洛's avatar
雪洛 已提交
115
  <scroll-view style="flex: 1">
A
Anne_LXM 已提交
116
    <view class="content">
117
      <page-head title="组件属性"></page-head>
H
hdx 已提交
118 119 120 121 122 123 124 125 126 127 128
      <boolean-data :defaultValue="false" title="当前是否选中,可用来设置默认选中" @change="change_checked_boolean"></boolean-data>
      <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
      <input-data defaultValue="#007aff" title="checkbox的颜色" type="text" @confirm="confirm_color_input"></input-data>
      <input-data defaultValue="#ffffff" title="checkbox默认的背景颜色" type="text"
        @confirm="confirm_backgroundColor_input"></input-data>
      <input-data defaultValue="#d1d1d1" title="checkbox默认的边框颜色" type="text"
        @confirm="confirm_borderColor_input"></input-data>
      <input-data defaultValue="#ffffff" title="checkbox选中时的背景颜色" type="text"
        @confirm="confirm_activeBackgroundColor_input"></input-data>
      <input-data defaultValue="#d1d1d1" title="checkbox选中时的边框颜色" type="text"
        @confirm="confirm_activeBorderColor_input"></input-data>
129
      <input-data defaultValue="#007aff" title="iconColor: checkbox的图标颜色,优先级大于color属性" type="text"
H
hdx 已提交
130
        @confirm="confirm_iconColor_input"></input-data>
131 132
      <input-data defaultValue="#ff0000" title="foreColor: checkbox的图标颜色,优先级大于color属性" type="text"
        @confirm="confirm_foreColor_input"></input-data>
133
    </view>
DCloud-WZF's avatar
DCloud-WZF 已提交
134

135 136 137 138 139 140 141
    <view>
      <page-head title="默认及使用"></page-head>
      <view class="uni-padding-wrap uni-common-mt">
        <view class="uni-title uni-common-mt">
          <text class="uni-title-text"> 默认样式 </text>
        </view>
        <view>
H
hdx 已提交
142
          <checkbox-group class="uni-flex uni-row checkbox-group" @change="testChange" style="flex-wrap: wrap">
143 144
            <checkbox value="cb" :checked="checked" :color="color" :iconColor="iconColor" :foreColor="foreColor"
              style="margin-right: 15px" class="checkbox cb">选中
145
            </checkbox>
H
hdx 已提交
146
            <checkbox value="cb1" style="margin-right: 15px" class="checkbox cb1">{{ text }}</checkbox>
H
hdx 已提交
147
            <checkbox value="cb2" :disabled="disabled" class="checkbox cb2">禁用</checkbox>
H
hdx 已提交
148
            <checkbox value="cb3" style="margin-top: 10px" class="checkbox cb3">
149 150 151 152 153 154 155 156 157
              {{ wrapText }}
            </checkbox>
          </checkbox-group>
        </view>
        <view class="uni-title uni-common-mt">
          <text class="uni-title-text"> 不同颜色和尺寸的checkbox </text>
        </view>
        <view>
          <checkbox-group class="uni-flex uni-row checkbox-group">
H
hdx 已提交
158
            <checkbox value="cb1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 15px"
H
hdx 已提交
159
              class="checkbox">选中
160
            </checkbox>
H
hdx 已提交
161
            <checkbox value="cb" color="#FFCC33" style="transform: scale(0.7)" class="checkbox">未选中</checkbox>
162 163
          </checkbox-group>
        </view>
164 165 166 167 168 169 170 171
        <view class="uni-title uni-common-mt">
          <text class="uni-title-text"> 两端对齐样式测试 </text>
        </view>
        <view>
          <checkbox-group class="uni-flex uni-row checkbox-group">
            <checkbox class="justify-test">justify-content样式测试</checkbox>
          </checkbox-group>
        </view>
172
      </view>
173

174 175 176 177 178 179
      <view class="uni-padding-wrap">
        <view class="uni-title uni-common-mt">
          <text class="uni-title-text"> 推荐展示样式 </text>
        </view>
      </view>
      <view class="uni-list uni-common-pl">
180
        <checkbox-group @change="checkboxChange" class="checkbox-group" id="trigger-change">
H
hdx 已提交
181
          <checkbox class="uni-list-cell uni-list-cell-pd checkbox" v-for="(item, index) in items" :key="item.value"
182 183 184 185
            :value="item.value" :checked="item.checked" :class="[
              index < items.length - 1 ? 'uni-list-cell-line' : '',
              'checkbox-item-' + index,
            ]">
186 187 188 189 190 191
            {{ item.name }}
          </checkbox>
        </checkbox-group>
      </view>
    </view>
  </scroll-view>
192
</template>
Y
init  
yurj26 已提交
193 194

<style>
H
hdx 已提交
195 196 197 198 199 200 201
  .main {
    max-height: 250px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-direction: row;
    justify-content: center;
  }
202

H
hdx 已提交
203 204 205 206 207
  .main .list-item {
    width: 100%;
    height: 100px;
    border: 1px solid #666;
  }
208

H
hdx 已提交
209 210 211
  .uni-list-cell {
    justify-content: flex-start;
  }
212 213 214 215 216

  .justify-test {
    width: 100%;
    justify-content: space-between;
  }
H
hdx 已提交
217
</style>
反馈
建议
客服 返回
顶部