no message

Former-commit-id: 6856f455071ef5c5f909a9b136eac2b2cbf3eabd [formerly 6856f455071ef5c5f909a9b136eac2b2cbf3eabd [formerly 6856f455071ef5c5f909a9b136eac2b2cbf3eabd [formerly 6856f455071ef5c5f909a9b136eac2b2cbf3eabd [formerly c09ce04902dac955b5d5779951f61ebf5ab67b69 [formerly df56ec98ae2616c48d6a8089fcf4637b549422d1]]]]]
Former-commit-id: 159f08de0ca46d3b987977daaf6002a706fef695
Former-commit-id: 07fcc5bf9ccf2b4e63f34e01e00bb6fa32f6caba
Former-commit-id: 4d05bf6f6e5ac45c7dfc55d84034224b05de9ff5 [formerly df34a1a4b969928749708e0c5baec05e8d5823fb]
Former-commit-id: 5ef9e5ad7cb819c4627380ac1a6c47c8c15e3927
Former-commit-id: a4903c4f7caa1c14a8566185df59b2db4bb544ea
Former-commit-id: 4f846abc0f664e161a2584da1dd6bb5e4c7750d6
Former-commit-id: 1d140fc9ddd1df8e83da63f5839491bd139c8005
Former-commit-id: aa8fc9388d29e9f2fb8fe368f62335f7af2df788

src/menu/index.js

@@ -145,7 +145,8 @@ const demoElement = {
       path: `${pre}form`,
       title: '表单',
       children: [
-        { path: `${pre}form-radio`, title: '单选框' }
+        { path: `${pre}form-radio`, title: '单选框' },
+        { path: `${pre}form-checkbox`, title: '多选框' }
       ]
     }
   ])('/demo/element/')

src/pages/demo/element/form-checkbox/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <d2-container>
+    <el-row>
+      <el-col :span="12">
+
+        <h1 class="d2-mt-0">基础用法</h1>
+        <el-row>
+          <el-checkbox v-model="checked1">备选项1</el-checkbox>
+          <el-checkbox v-model="checked2">备选项2</el-checkbox>
+        </el-row>
+
+        <h1>禁用状态</h1>
+        <el-row>
+          <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>
+          <el-checkbox v-model="checked2" disabled>备选项2</el-checkbox>
+        </el-row>
+
+        <h1>多选框组</h1>
+        <el-checkbox-group v-model="checkList">
+          <el-checkbox label="复选框 A"></el-checkbox>
+          <el-checkbox label="复选框 B"></el-checkbox>
+          <el-checkbox label="复选框 C"></el-checkbox>
+          <el-checkbox label="禁用" disabled></el-checkbox>
+          <el-checkbox label="选中且禁用" disabled></el-checkbox>
+        </el-checkbox-group>
+
+        <h1>indeterminate 状态</h1>
+        <el-checkbox :indeterminate="true" label="复选框"></el-checkbox>
+
+        <h1>可选项目数量的限制</h1>
+        <el-checkbox-group 
+          v-model="checkedCities"
+          :min="1"
+          :max="2">
+          <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
+        </el-checkbox-group>
+
+      </el-col>
+      <el-col :span="12">
+
+        <h1>按钮样式</h1>
+        <div>
+          <el-checkbox-group v-model="checkboxGroup1">
+            <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+          </el-checkbox-group>
+        </div>
+        <div style="margin-top: 20px">
+          <el-checkbox-group v-model="checkboxGroup1" size="medium">
+            <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+          </el-checkbox-group>
+        </div>
+        <div style="margin-top: 20px">
+          <el-checkbox-group v-model="checkboxGroup1" size="small">
+            <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button>
+          </el-checkbox-group>
+        </div>
+        <div style="margin-top: 20px">
+          <el-checkbox-group v-model="checkboxGroup1" size="mini" disabled>
+            <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+          </el-checkbox-group>
+        </div>
+
+        <h1>带有边框</h1>
+        <div>
+          <el-checkbox v-model="checked1" label="备选项1" border></el-checkbox>
+          <el-checkbox v-model="checked2" label="备选项2" border></el-checkbox>
+        </div>
+        <div style="margin-top: 20px">
+          <el-checkbox v-model="checked1" label="备选项1" border size="medium"></el-checkbox>
+          <el-checkbox v-model="checked2" label="备选项2" border size="medium"></el-checkbox>
+        </div>
+        <div style="margin-top: 20px">
+          <el-checkbox-group v-model="checkboxGroup2" size="small">
+            <el-checkbox label="备选项1" border></el-checkbox>
+            <el-checkbox label="备选项2" border disabled></el-checkbox>
+          </el-checkbox-group>
+        </div>
+        <div style="margin-top: 20px">
+          <el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
+            <el-checkbox label="备选项1" border></el-checkbox>
+            <el-checkbox label="备选项2" border></el-checkbox>
+          </el-checkbox-group>
+        </div>
+
+      </el-col>
+    </el-row>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      checked1: true,
+      checked2: false,
+      checkList: ['选中且禁用', '复选框 A'],
+      checkedCities: ['上海', '北京'],
+      cities: ['上海', '北京', '广州', '深圳'],
+      checkboxGroup1: ['上海'],
+      checkboxGroup2: []
+    }
+  }
+}
+</script>

src/router/index.js

@@ -115,6 +115,7 @@ const routes = [
       { path: 'basic-icon', name: `${pre}basic-icon`, component: () => import('@/pages/demo/element/basic-icon/index.vue'), meta },
       { path: 'basic-button', name: `${pre}basic-button`, component: () => import('@/pages/demo/element/basic-button/index.vue'), meta },
       { path: 'form-radio', name: `${pre}form-radio`, component: () => import('@/pages/demo/element/form-radio/index.vue'), meta },
+      { path: 'form-checkbox', name: `${pre}form-checkbox`, component: () => import('@/pages/demo/element/form-checkbox/index.vue'), meta },
       { path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/element/index/index.vue'), meta }
     ])('demo-element-')
   },