Element-rc8-template

by leopoldthecuber

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.0.0-rc.8/theme-default/index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.0.0-rc.8/theme-default/fonts/element-icons.woff"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.0.0-rc.8/theme-default/fonts/element-icons.ttf"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.0.0-rc.9/index.js"></script>
<div id="app">
  <el-button type="text" @click.native="dialogVisible = true">点击打开 Dialog</el-button>

  <el-dialog title="提示" v-model="dialogVisible" size="tiny">
    <el-form class="noline" ref="configForm" label-position="top" :model="config.form" :rules="config.rules">
      <el-form-item label="语言" prop="locale">
        <el-select v-model="config.form.locale">
          <el-option label="简体中文(zh_CN)" value="zh_CN"></el-option>
          <el-option label="English(en)" value="en"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="pageLimit" label="每页条目数">
        <el-slider v-model="config.form.pageLimit" :min="10" :max="100" :step="5" show-input></el-slider>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click.native="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click.native="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</div>

Babel + JSX

new Vue({
	el:  '#app',
  data: {
  	dialogVisible: false,
    config: {
    	form: {
      	locale: 'zh_CN',
        pageLimit: 10
      },
      rules: {
        locale: [{ required: true }],
        pageLimit: [{ type: 'number', required: true }]
      }
    }
  },
  mounted () {
  	this.$nextTick(() => {
    	this.config.form.pageLimit = 15
    })
  }
})