| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>iviewDemo</title>
- #parse("sys/header.html")
- </head>
- <body>
- <div id="rrapp" v-cloak>
- <div id="body">
- <i-button type="info" @click="api">IVIEW_API</i-button>
- <i-switch v-model="switch1" @on-change="change"></i-switch>
- <Row>
- <i-col span="12">
- <Date-picker type="date" v-model="data1" placeholder="选择日期" style="width: 200px"></Date-picker>
- {{data1}}
- </i-col>
- <i-col span="12">
- <Date-picker type="daterange" placement="bottom-end" placeholder="选择日期区间"
- style="width: 200px"></Date-picker>
- </i-col>
- </Row>
- <Tabs value="name1">
- <Tab-pane label="buttons" name="name0">
- <i-col span="24">
- <i-button>Default</i-button>
- <i-button type="primary">Primary</i-button>
- <i-button type="ghost">Ghost</i-button>
- <i-button type="dashed">Dashed</i-button>
- <i-button type="text">Text</i-button>
- <i-button type="info">信息按钮</i-button>
- <i-button type="success">成功按钮</i-button>
- <i-button type="warning">警告按钮</i-button>
- <i-button type="error">错误按钮</i-button>
- </i-col>
- <i-col span="24">
- <i-button type="primary" shape="circle" size="large">Large</i-button>
- <i-button type="primary" shape="circle">Default</i-button>
- <i-button type="primary" shape="circle" size="small">Small</i-button>
- <i-button type="ghost" icon="social-facebook"></i-button>
- <i-button type="ghost" icon="social-twitter"></i-button>
- <i-button type="success" @click="show">Click me!</i-button>
- <Modal v-model="visible" title="Welcome">欢迎使用 iView</Modal>
- </i-col>
- </i-col>
- <i-col span="24">
- <i-button type="success" shape="circle" icon="ios-search"></i-button>
- <i-button type="success" icon="ios-search">搜索</i-button>
- <i-button type="success" shape="circle" icon="ios-search">搜索</i-button>
- <i-button type="success" shape="circle">圆角按钮</i-button>
- <i-button type="ghost" shape="circle" icon="ios-search"></i-button>
- <i-button type="ghost" icon="ios-search">搜索</i-button>
- <i-button type="ghost" shape="circle" icon="ios-search">搜索</i-button>
- <i-button type="ghost" shape="circle">圆角按钮</i-button>
- <i-button type="primary">Primary</i-button>
- <i-button type="primary" disabled>Primary(Disabled)</i-button>
- </i-col>
- <i-col span="24">
- <i-button type="primary" loading>Loading...</i-button>
- <i-button type="primary" :loading="loading" @click="toLoading">
- <span v-if="!loading">Click me!</span>
- <span v-else>Loading...</span>
- </i-button>
- <i-button type="primary" :loading="loading2" icon="checkmark-round" @click="toLoading2">
- <span v-if="!loading2">Click me!</span>
- <span v-else>Loading...</span>
- </i-button>
- </i-col>
- <i-col span="6">
- <i-button type="success" long>确认提交</i-button>
- </i-col>
- <i-col span="6">
- <i-button type="error" long>确认删除</i-button>
- </i-col>
- </Tab-pane>
- <Tab-pane label="form表单" name="name1">
- <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
- <Form-item label="姓名" prop="name">
- <i-input v-model="formValidate.name" placeholder="请输入姓名"/>
- </Form-item>
- <Form-item label="邮箱" prop="mail">
- <i-input v-model="formValidate.mail" placeholder="请输入邮箱"/>
- </Form-item>
- <Form-item label="城市" prop="city">
- <i-select v-model="formValidate.city" placeholder="请选择所在地">
- <i-option value="beijing">北京市</i-option>
- <i-option value="shanghai">上海市</i-option>
- <i-option value="shenzhen">深圳市</i-option>
- </i-select>
- </Form-item>
- <Form-item label="选择日期">
- <Row>
- <i-col span="5">
- <Form-item prop="date">
- <Date-picker type="date" placeholder="选择日期"
- v-model="formValidate.date"></Date-picker>
- </Form-item>
- </i-col>
- <i-col span="1" style="text-align: center">-</i-col>
- <i-col span="5">
- <Form-item prop="time">
- <Time-picker type="time" placeholder="选择时间"
- v-model="formValidate.time"></Time-picker>
- </Form-item>
- </i-col>
- </Row>
- </Form-item>
- <Form-item label="性别" prop="gender">
- <Radio-group v-model="formValidate.gender">
- <Radio label="male">男</Radio>
- <Radio label="female">女</Radio>
- </Radio-group>
- </Form-item>
- <Form-item label="爱好" prop="interest">
- <Checkbox-group v-model="formValidate.interest">
- <Checkbox label="吃饭"></Checkbox>
- <Checkbox label="睡觉"></Checkbox>
- <Checkbox label="跑步"></Checkbox>
- <Checkbox label="看电影"></Checkbox>
- </Checkbox-group>
- </Form-item>
- <Form-item label="介绍" prop="desc">
- <i-input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
- placeholder="请输入..."/>
- </Form-item>
- <Form-item>
- <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
- <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置
- </i-button>
- </Form-item>
- </i-form>
- </Tab-pane>
- <Tab-pane label="时间轴" name="name2">
- <Timeline>
- <Timeline-item>
- <p class="time">1976年</p>
- <p class="content">Apple I 问世</p>
- </Timeline-item>
- <Timeline-item>
- <p class="time">1984年</p>
- <p class="content">发布 Macintosh</p>
- </Timeline-item>
- <Timeline-item>
- <p class="time">2007年</p>
- <p class="content">发布 iPhone</p>
- </Timeline-item>
- <Timeline-item>
- <p class="time">2010年</p>
- <p class="content">发布 iPad</p>
- </Timeline-item>
- <Timeline-item>
- <p class="time">2011年10月5日</p>
- <p class="content">史蒂夫·乔布斯去世</p>
- </Timeline-item>
- </Timeline>
- </Tab-pane>
- <Tab-pane label="slider" name="name3">
- <Slider v-model="value1"></Slider>
- <Slider v-model="value2" range></Slider>
- <Slider v-model="value3" range disabled></Slider>
- <Slider v-model="value4" :step="10"></Slider>
- <Slider v-model="value5" :step="10" range></Slider>
- <Slider v-model="value6" :step="10" show-stops></Slider>
- <Slider v-model="value7" :step="10" show-stops range></Slider>
- <Slider v-model="value8" show-input></Slider>
- <Slider v-model="value9" :tip-format="format"></Slider>
- <Slider v-model="value10" :tip-format="hideFormat"></Slider>
- </Tab-pane>
- <Tab-pane label="Circle 进度环" name="name4">
- <i-circle
- :size="250"
- :trail-width="4"
- :stroke-width="5"
- :percent="75"
- stroke-linecap="square"
- stroke-color="#43a3fb">
- <div class="demo-i-circle-custom">
- <h1>42,001,776</h1>
- <p>消费人群规模</p>
- <span>
- 总占人数
- <i>75%</i>
- </span>
- </div>
- </i-circle>
- </Tab-pane>
- <Tab-pane label="级联选择" name="name5">
- <Cascader :data="data" v-model="value11"></Cascader>
- </Tab-pane>
- <Tab-pane label="Select" name="name6">
- <i-select v-model="model2" size="small" style="width:100px">
- <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
- </i-select>
- <i-select v-model="model3" style="width:100px">
- <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
- </i-select>
- <i-select v-model="model4" size="large" style="width:100px">
- <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
- </i-select>
- </Tab-pane>
- </Tabs>
- </div>
- </div>
- <script src="${rc.contextPath}/js/test/iviewDemo.js?_${date.systemTime}"></script>
- </body>
- </html>
|
