# vue前端开发-代码片段包含了符合凯普顿前端开发模式 iview 的代码片段，常用的代码片段 # 凯普顿vscode插件 (电子政务平台版本) ## 更新日志 ### v0.1.4 ## 安装方式 1. 在vscode中 ctrl+p ext install cpt-vscode ## iview 代码片段 ### Button 1. iv-btn --> `Button(type="$1" size="$2" icon="$3") $2` 2. iv-btn-default --> `Button $1` 3. iv-btn-primary --> `Button(type="primary") $1` 4. iv-btn-info --> `Button(type="info") $1` 5. iv-btn-success --> `Button(type="success") $1` 6. iv-btn-warning --> `Button(type="warning") $1` 7. iv-btn-error --> `Button(type="error") $1` ### icon 1. iv-icon --> `Icon(type="$1")` 2. iv-icon-fontellon --> `i.icon.icon$1` ### input 1. iv-input --> `Input(v-model="$1")` 2. iv-input-placeholder --> `Input(v-model="$1" placeholder="${2:请输入...}")` 3. iv-input-icon --> `Input(v-model="$1" icon="${2:type...}")` 4. iv-input-textarea --> `Input(v-model="$1" type="textarea" placeholder="${2:请输入...}")` 5. iv-input-slot --> ``` Input(v-model="$1") span(slot="prepend") $2 span(slot="append") $3 ``` 6.iv-input-number --> `Input-number(v-model="$1" :max="$2" :min="$3" )` ### radio 1. iv-radio --> `Radio(v-model="${1:single}")` 2. iv-radio-group --> ``` Radio-group(v-model="${1:phone}" ${4:vertical}) Radio(label="${2:Apple}") "${2:Apple}" Radio(label="${3:Huawei}" ${5:disabled}) "${3:Huawei}" ``` 3. iv-radio-group-button --> ``` Radio-group(v-model="${1:phone}" type="button") Radio(label="${2:Apple}") "${2:Apple}" Radio(label="${3:Huawei}" ${5:disabled}) "${3:Huawei}" ``` ### checkbox 1. iv-checkbox --> `Checkbox(v-model="${1:single}")` 2. iv-checkbox-group --> ``` Checkbox-group(v-model="$1") Checkbox(label="$2") ``` ###switch 1. iv-switch --> i-switch(v-model="$1") 2. iv-switch-slot --> ``` i-switch(v-model="$1") span(slot="open") ${2:开} span(slot="close") ${3:关} ``` ### table 1. iv-table --> `Table(ref="table" border :columns="${1:columns}" :data="${2:data}" v-grid-autosize="${3:10}")` 2. iv-table-strip --> `Table(ref="table" stripe :columns="${1:columns}" :data="${2:data}" v-grid-autosize="${3:10}")` 3. iv-table-highlightrow --> `Table(ref="table" border highlight-row :columns="${1:columns}" :data="${2:data}" v-grid-autosize="${3:10}")` 4. iv-table-cpt --> `custom-table(ref="table" :columns="${1:columns}" :data="${2:data}" v-grid-autosize="${3:70}")` ### select 1. iv-select --> ``` Select(v-model="$1") Option(v-for="item in $1" :value="item.$2" :key="item") {{item.$1} ``` 2. iv-select-filterable-multiple --> ``` Select(v-model="$1" filterable multiple) Option(v-for="item in $1" :value="item.$2" :key="item") \{\{item.$3\} ``` ### slider 1. iv-slider --> `Slider(v-model="$1" :tip-format="$2")` 2. iv-slider-tipformat --> `Slider(v-model="$1" :tip-format="$2")` ### date-picker 1. iv-datepicker --> `Date-picker(type="date" :v-model="$1" format="${2:yyyy-MM-dd}" placeholder="${3:选择日期}")` 2. iv-datepicker-range --> `Date-picker(type="daterange" :v-model="$1" format="${2:yyyy-MM-dd}" placement="bottom-end" placeholder="${3:选择日期}")` 3. iv-datepicker-time --> `Date-picker(type="datetime" :v-model="$1" format="${2:yyyy-MM-dd HH:mm:ss}" placeholder="${3:选择日期时间}")` 4. iv-datepicker-year --> `Date-picker(type="year" :v-model="$1" placeholder="${3:选择年份}")` 5. iv-datepicker-month --> `Date-picker(type="month" :v-model="$1" format="${2:yyyy-MM}" placeholder="${3:选择月份}")` ### time-picker 1. `Time-picker(type="time" :v-model="$1" format="${HH:mm:ss}" placeholder="${3:选择时间}")` ### cascader [级联选择](https://www.iviewui.com/components/cascader) 1. iv-cascader --> `cascader(:data="${1:data}" v-model="$2")` ### transfer [穿梭框](https://www.iviewui.com/components/transfer) 1. iv-transfer --> `Transfer(:data="${1:data}" target-keys="${2:targetKeys}" :operations="['源列表','目标列表']")` 2. iv-transfer-filterable --> `Transfer(:data="${1:data}" filterable target-keys="${2:targetKeys}" :operations="['源列表','目标列表']")` ### rate [评分](https://www.iviewui.com/components/rate) 1. iv-rate --> `Rate(allow-half v-model="$1")` ### upload 1. iv-upload --> ``` Upload(action="$1") Button(type="ghost" icon="ios-cloud-upload-outline" ${3:multiple}) ${2:上传文件} ``` ### form 1. iv-form --> `Form(ref="form" :model="${1:model}" :rules="${2:rules}" :label-width="${3:100}")` 2. iv-form-item --> ``` Form-item(label="$1" prop="$2") Input(type="${3:text}" v-model="$2") ``` 3. iv-form-item-select --> ``` Form-item(label="$1" prop="$2") Select(v-model="$2") Option(v-for="item in $3" :value="item.${2}" :key="item") \{\{item.${4}\} ``` 4. iv-form-item-blank --> `Form-item(label="$1" prop="$2")` ### message 1. iv-message-info --> `this.$Message.info(${1:消息})` 2. iv-message-success --> `this.$Message.success(${1:'消息'})` 3. iv-message-warning --> `this.$Message.warning(${1:'消息'})` 4. iv-message-error --> `this.$Message.error(${1:'消息'})` 5. iv-message-loading --> `this.$Message.loading(${1:'消息'})` 6. iv-message-destory -->> `this.$Message.destroy()` ### Notice 1. iv-notice-info --> `this.$Notice.info(${1:消息})` 2. iv-notice-success --> `this.$Notice.success(${1:'消息'})` 3. iv-notice-warning --> `this.$Notice.warning(${1:'消息'})` 4. iv-notice-error --> `this.$Notice.error(${1:'消息'})` 5. iv-notice-loading --> `this.$Notice.loading(${1:'消息'})` 6. iv-notice-destory -->> `this.$Notice.destroy()` 7. iv-notice-close -->> `this.$Notice.close(${1:key})` 8. iv-notice-open -->> `this.$Notice.open(\{title:${1:'标题'},desc:${1:'描述'}\})` ### Modal 1. iv-modal --> `Modal(v-model="visible" title="${1:标题}")` 2. iv-modal-cpt --> ``` Modal(v-model="visible" title="${1:标题}" :mask-closable="false" ) $3 Button(type="text" slot="footer" @click="visible=false") 取消 Button(type="primary" slot="footer" @click="visible=false") ${2:确定} ``` 3. iv-modal-ext --> 可拖动，非模态，禁用ESC键的弹框 ### progress 1. iv-progress --> `Progress(:percent="$1")` 2. iv-progress-active --> `Progress(:percent="$1" status="active")` 3. iv-progress-wrong --> `Progress(:percent="$1" status="wrong")` ### Badge 1. iv-badge --> ``` Badge(:count="${1:count}") $2 ``` 2. iv-badge-dot --> ``` Badge(dot) $1 ``` ### tag 1. iv-tag --> `Tag ${1:标签}` 2. iv-tag-close --> `Tag(closable color="blue") ${1:标签}` 3. iv-tag-border --> `Tag(closable type="border" color="blue") ${1:标签}` ### Tooltip 文字提示 1. iv-tooltip ``` Tooltip(content="$1" placement="top") $2 ``` 2. iv-tooltip-slot ``` Tooltip(content="$1" placement="top") div(slot="content") $2 $3 ``` ### Poptip 气泡提示 1. iv-poptip ``` Poptip(trigger="${1:hover}" title="$2" content="${3:内容}" placement="top") $4 ``` ### Tabs 标签页 1. iv-tabs --> ``` Tabs(value="${1:tab}") Tab-pane(label="标签一" name="name1") 内容 ``` 2. iv-tabs-card --> ``` Tabs(value="${1:tab}" type="card") Tab-pane(label="标签一" name="name1") 内容 ``` ### Page 分页 1. iv-page --> `Page(:total="total" :page-size="pageSize" show-total placement="top" @on-change="pageChange")` ## 凯普顿代码片段 ### 1. cpt-page 普通页面模板 ``` " ``` ### 2. cpt-page-crud 具有增删改查的页面模板 ``` ``` ### 3. cpt-edit 普通编辑模板 ``` ``` ### 4. cpt-form 普通表单模板 ``` ``` ### 5. cpt-store 普通数据业务层模板吧 ``` import api from './api'; import _ from 'lodash'; import { columns, defaults } from './model'; const namespace = '${1:TM_TM_FILENAME}'; const r = ac => `${namespace}/${ac}`; export const moduleName = namespace; //actions export const SEARCH = r('SEARCH'); //getters export const GETTER_DATA = r('GETTER_DATA'); //mutations const SETDATA = r('SETDATA'); export const module = function (api) { return { state: { data: [], }, getters: { [GETTER_DATA]: state => _.cloneDeep(state.data), }, mutations: { [SETDATA](true/state, { data, total }) { state.data = data; state.total = total; } }, actions: { async[SEARCH](true/{ commit }, { key, page, pageSize }) { let res = await api.search(key, page, pageSize); res.success && commit(SETDATA, res); return res; } } } } export default module(api); ``` ### 6. cpt-store-crud 具有增删改查数据业务层的模板 ``` import api from './api'; import _ from 'lodash'; import { columns, defaults } from './model'; const namespace = '$1'; const r = ac => `${namespace}/${ac}`; export const moduleName = namespace; //actions export const SEARCH = r('SEARCH'); export const GET_DEFAULTS = r('GET_DEFAULTS'); export const SAVE = r('SAVE'); export const REMOVE = r('REMOVE'); export const GET = r('GET'); //getters export const GETTER_DATA = r('GETTER_DATA'); export const GETTER_COLUMNS = r('GETTER_COLUMNS'); export const GETTER_TOTAL = r('GETTER_TOTAL'); export const GETTER_MODEL = r('GETTER_MODEL'); //mutations const SETDATA = r('setData'); export const SET_MODEL = r('SET_MODEL'); export const module = function (api) { return { state: { data: [], columns: _.cloneDeep(columns), total: 0, model: _.cloneDeep(defaults) }, getters: { [GETTER_DATA]: state => _.cloneDeep(state.data), [GETTER_COLUMNS]: state => _.cloneDeep(state.columns), [GETTER_TOTAL]: state => state.total, [GETTER_MODEL]: state => _.cloneDeep(state.model) }, mutations: { [SETDATA](true/state, { data, total }) { state.data = data; state.total = total; }, [SET_MODEL](true/state, model) { state.model = model; } }, actions: { async[SEARCH](true/{ commit }, { key, page, pageSize }) { let res = await api.search(key, page, pageSize); res.success && commit(SETDATA, res); return res; }, [GET_DEFAULTS](true/{ commit }) { commit(SET_MODEL, _.cloneDeep(defaults)); }, [SAVE](true/ctx, model) { return api.save(model); }, [REMOVE](true/ctx, ids) { return api.remove(ids); }, async[GET](true/{ commit }, id) { let res = await api.get(id); commit(SET_MODEL, res.data); return res; } } } } export default module(api); ``` ### 7. cpt-imp `import $1 from '$2';` ### 8. cpt-imp-loadsh 引入lodash --> `import _ from 'lodash';` ### 9. cpt-imp-vuex 引入vuex --> `import {mapGetters,${1:mapMutations},${2:mapState}} from 'lodash';` ### 10. cpt-imp-api 引入api --> `import api from './api';` ### 11. cpt-imp-model 引入model --> `import \{ columns, defaults \} from './model';` ### 12. cpt-imp-comp 引入component --> `import $1 from '@/components/$2'` ### 13. cpt-exp 导出 `export const $1 = $2` ### 14. cpt-exp-storetype 导出数据层的actions,muations,getters --> `export const $1 = r('$1');` ### 15. cpt-exp-default 导出默认 --> `export default {}` ### 16. cpt-store-getters `[$1]:state=>_.cloneDeep(state.$2)`; ### 17. cpt-store-muac ``` [$1](true/state, $2) { state.$2 = $2; }, ```