Browse Source

修改组件细节

pull/46/head
zq 2 weeks ago
parent
commit
7fa729c328
  1. 2
      babel.config.js
  2. 8
      package-lock.json
  3. 1
      package.json
  4. 1
      src/assets/menu/home.svg
  5. 1
      src/assets/menu/orderList.svg
  6. 1
      src/components/GuipButton.vue
  7. 1
      src/components/GuipDialog.vue
  8. 13
      src/components/GuipInput.vue
  9. 1
      src/components/GuipRadio.vue
  10. 3
      src/components/GuipSelect.vue
  11. 3
      src/components/GuipSwitch.vue
  12. 8
      src/components/GuipTextarea.vue
  13. 2
      src/components/SetLeftMenu.vue
  14. 0
      src/router/admin-routes.json
  15. 0
      src/router/client-routes.json
  16. 6
      src/store/index.js
  17. 12
      src/style/theme/common.scss
  18. 3
      src/style/theme/index.css
  19. 3
      src/views/Register.vue
  20. 189
      src/views/elementGroups.vue
  21. 17
      vue.config.js

2
babel.config.js

@ -20,6 +20,6 @@ module.exports = {
plugins: [ plugins: [
// 可以添加其他Babel插件 // 可以添加其他Babel插件
'@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-runtime', '@babel/plugin-transform-runtime'
], ],
}; };

8
package-lock.json

@ -30,6 +30,7 @@
"@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"babel-loader": "^9.2.1", "babel-loader": "^9.2.1",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3", "eslint-plugin-vue": "^8.0.3",
"sass": "^1.32.7", "sass": "^1.32.7",
@ -3837,6 +3838,13 @@
"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
} }
}, },
"node_modules/babel-plugin-transform-remove-console": {
"version": "6.9.4",
"resolved": "https://registry.npmjs.org/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.4.tgz",
"integrity": "sha512-88blrUrMX3SPiGkT1GnvVY8E/7A+k6oj3MNvUtTIxJflFzXTw1bHkuJ/y039ouhFMp2prRn5cQGzokViYi1dsg==",
"dev": true,
"license": "MIT"
},
"node_modules/babel-runtime": { "node_modules/babel-runtime": {
"version": "6.26.0", "version": "6.26.0",
"resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz", "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",

1
package.json

@ -30,6 +30,7 @@
"@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"babel-loader": "^9.2.1", "babel-loader": "^9.2.1",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3", "eslint-plugin-vue": "^8.0.3",
"sass": "^1.32.7", "sass": "^1.32.7",

1
src/assets/menu/home.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 10 KiB

1
src/assets/menu/orderList.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g><g></g><g><path d="M6.32635,2.7327339999999998Q6.38859,2.719143,6.44764,2.695249Q6.5067,2.671355,6.56088,2.637843Q6.61506,2.604331,6.66281,2.562161Q6.71056,2.519991,6.75051,2.470371Q6.79046,2.420751,6.82148,2.365103Q6.85249,2.309455,6.87367,2.249374Q6.89485,2.189292,6.9056,2.126499Q6.91634,2.063706,6.91634,2Q6.91634,1.9261314999999999,6.90193,1.853682Q6.88752,1.781233,6.85925,1.712987Q6.83098,1.644742,6.78995,1.583322Q6.74891,1.521903,6.69667,1.46967Q6.64444,1.417437,6.58302,1.376398Q6.5216,1.335359,6.45336,1.30709Q6.38511,1.278822,6.31266,1.264411Q6.24021,1.25,6.16634,1.25Q6.08541,1.25,6.00634,1.267267Q3.5139,1.811539,1.8938359999999999,3.79988Q0.25,5.817410000000001,0.25,8.42431Q0.25,11.45871,2.39565,13.6044Q4.54129,15.75,7.57569,15.75Q10.18259,15.75,12.2001,14.1062Q14.1875,12.4869,14.7322,9.99616L14.7326,9.99411L14.7327,9.99366L13.2673,9.67365L6.32635,2.7327339999999998Z" fill-rule="evenodd" fill="#626573" fill-opacity="1"/></g><g><path d="M7.25,1L7.25,8Q7.25,8.07387,7.264411,8.14632Q7.278822,8.21877,7.30709,8.28701Q7.335359,8.355260000000001,7.376398,8.41668Q7.417437,8.478100000000001,7.46967,8.53033Q7.521903,8.58256,7.583322,8.6236Q7.644742,8.66464,7.712987,8.692910000000001Q7.781233,8.72118,7.853682,8.73559Q7.9261315,8.75,8,8.75L15,8.75Q15.07387,8.75,15.14632,8.73559Q15.21877,8.72118,15.28701,8.692910000000001Q15.355260000000001,8.66464,15.41668,8.6236Q15.478100000000001,8.58256,15.53033,8.53033Q15.58256,8.478100000000001,15.6236,8.41668Q15.66464,8.355260000000001,15.692910000000001,8.28701Q15.72118,8.21877,15.73559,8.14632Q15.75,8.07387,15.75,8Q15.75,4.7898499999999995,13.480080000000001,2.51992Q11.21016,0.25,8,0.25Q7.9261315,0.25,7.853682,0.26441099999999995Q7.781233,0.278822,7.712987,0.30709Q7.644742,0.33535899999999996,7.583322,0.376398Q7.521903,0.41743699999999995,7.46967,0.46967000000000003Q7.417437,0.521903,7.376398,0.583322Q7.335359,0.6447419999999999,7.30709,0.712987Q7.278822,0.7812330000000001,7.264411,0.853682Q7.25,0.9261315,7.25,1ZM8.75,7.25L14.209869999999999,7.25Q13.97896,5.14012,12.419419999999999,3.58058Q10.85988,2.02104,8.75,1.7901310000000001L8.75,7.25Z" fill-rule="evenodd" fill="#626573" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

1
src/components/GuipButton.vue

@ -1,6 +1,7 @@
<template> <template>
<el-button <el-button
:type="type" :type="type"
v-bind="$attrs"
:plain="plain" :plain="plain"
:loading="loading" :loading="loading"
:size="size" :size="size"

1
src/components/GuipDialog.vue

@ -2,6 +2,7 @@
<el-dialog <el-dialog
:visible.sync="dialogShow" :visible.sync="dialogShow"
:title="title" :title="title"
v-bind="$attrs"
append-to-body append-to-body
:width="width" :width="width"
:show-close="showCloseButton" :show-close="showCloseButton"

13
src/components/GuipInput.vue

@ -6,6 +6,8 @@
<p v-if="desc" class="desc_right">{{ desc }}</p> <p v-if="desc" class="desc_right">{{ desc }}</p>
<el-input <el-input
:type="type" :type="type"
v-bind="$attrs"
:placeholder="placeholder1" :placeholder="placeholder1"
:disabled="disabled" :disabled="disabled"
:maxlength="maxlength1" :maxlength="maxlength1"
@ -13,6 +15,7 @@
:minLength="minLength1" :minLength="minLength1"
:show-word-limit="showWordLimit" :show-word-limit="showWordLimit"
@input="$emit('input', $event)" @input="$emit('input', $event)"
@keydown="handleKeydown"
@change="$emit('change', $event)" @change="$emit('change', $event)"
@blur="$emit('blur', inputValue)" @blur="$emit('blur', inputValue)"
@focus="$emit('focus', inputValue)" @focus="$emit('focus', inputValue)"
@ -116,9 +119,9 @@
// }) // })
}) })
// console.log(el,'====9999'); // console.log(el,'====9999');
// if(el&& this.styleObject){ // if(els&& this.styleObject){
// for(var key in this.styleObject){ // for(var key in this.styleObject){
// el.style[key] = this.styleObject[key] // els.style[key] = this.styleObject[key]
// } // }
// } // }
}) })
@ -132,6 +135,12 @@
// console.log('---'); // console.log('---');
// this.$emit('clear', '') // this.$emit('clear', '')
// } // }
handleKeydown(e) {
console.log(e);
// if (e.key === '1') {
e.preventDefault(); //
// }
},
} }
} }
</script> </script>

1
src/components/GuipRadio.vue

@ -4,6 +4,7 @@
:label="label" :prop="prop" :rules="rules"> :label="label" :prop="prop" :rules="rules">
<el-radio-group <el-radio-group
v-model="selectedValue" v-model="selectedValue"
v-bind="$attrs"
@change="handleChange" @change="handleChange"
> >
<el-radio <el-radio

3
src/components/GuipSelect.vue

@ -4,8 +4,7 @@
:prop="prop" :rules="rules"> :prop="prop" :rules="rules">
<p v-if="desc" class="desc_right">{{ desc }}</p> <p v-if="desc" class="desc_right">{{ desc }}</p>
<el-select :style="{ width: width }" :placeholder="placeholder1" @change="handleChange" v-model="selectedValue" v-bind="$attrs">
<el-select :style="{ width: width }" :placeholder="placeholder1" @change="handleChange" v-model="selectedValue">
<el-option v-for="item in options" :key="item.value" :label="item.label" :disabled="item.disabled" <el-option v-for="item in options" :key="item.value" :label="item.label" :disabled="item.disabled"
:value="item.value"> :value="item.value">
</el-option> </el-option>

3
src/components/GuipSwitch.vue

@ -3,7 +3,8 @@
<div class="flex switchWrap"> <div class="flex switchWrap">
<span class="switchDesc" v-if="activeText || inactiveText">{{ internalValue ? activeText : inactiveText <span class="switchDesc" v-if="activeText || inactiveText">{{ internalValue ? activeText : inactiveText
}}</span> }}</span>
<el-switch v-model="internalValue" :active-color="activeColor" :inactive-color="inactiveColor"
<el-switch v-model="internalValue" :active-color="activeColor" :inactive-color="inactiveColor" v-bind="$attrs"
:disabled="disabled || loading" @change="handleChange"> :disabled="disabled || loading" @change="handleChange">
<!-- 自定义开启时的图标 --> <!-- 自定义开启时的图标 -->
<template #active-icon> <template #active-icon>

8
src/components/GuipTextarea.vue

@ -1,17 +1,19 @@
<template> <template>
<el-input <el-input
type="textarea" type="textarea"
v-bind="$attrs"
:style="{...styleObject}" :style="{...styleObject}"
:rows="2" :rows="rows"
placeholder="请输入内容" :placeholder="placeholder"
v-model="textarea"> v-model="textarea">
</el-input> </el-input>
</template> </template>
<script> <script>
// autosize
export default { export default {
name: 'GuipTextarea', name: 'GuipTextarea',
props:['styleObject'], props:['styleObject','rows','placeholder'],
data() { data() {
return { return {
textarea: '' textarea: ''

2
src/components/SetLeftMenu.vue

@ -136,8 +136,8 @@ export default {
this.calculateFloorOffsets(); this.calculateFloorOffsets();
this.$nextTick(() => { this.$nextTick(() => {
// console.log(this.$parent.$refs.scrollContainer, 'this.$refs.scrollContainer--'); // console.log(this.$parent.$refs.scrollContainer, 'this.$refs.scrollContainer--');
})
this.$parent.$refs.scrollContainer.addEventListener('scroll', this.handleScroll); this.$parent.$refs.scrollContainer.addEventListener('scroll', this.handleScroll);
})
}, },
created() { created() {
// console.log(this.$parent.$refs.scrollContainer,'this.$refs.sc--rollContainer--'); // console.log(this.$parent.$refs.scrollContainer,'this.$refs.sc--rollContainer--');

0
src/router/admin-routes.json

0
src/router/client-routes.json

6
src/store/index.js

@ -98,12 +98,12 @@ export default new Vuex.Store({
index: '1', index: '1',
title: '首页', title: '首页',
path:'/', path:'/',
icon: 'Totalprofit', icon: 'home',
}, },
{ {
index: '2', index: '2',
title: '父级菜单1', title: '订单列表',
icon: 'Totalprofit', icon: 'orderList',
children: [{ children: [{
index: '2-1', index: '2-1',
title: '子级菜单2-1', title: '子级菜单2-1',

12
src/style/theme/common.scss

@ -13,6 +13,14 @@ body {
padding: 0; padding: 0;
} }
} }
/* 隐藏全局滚动条 */
::-webkit-scrollbar {
display: none;
}
body {
scrollbar-width: none;
-ms-overflow-style: none;
}
.element { .element {
overflow: hidden; /* 通用方法 */ overflow: hidden; /* 通用方法 */
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
@ -505,7 +513,7 @@ body {
} }
.el-input__inner { .el-input__inner {
height: 39px; height: 100%;
padding: 10px 12px; padding: 10px 12px;
border-radius: 4px; border-radius: 4px;
} }
@ -550,6 +558,7 @@ body {
background: #F6F7FA !important; background: #F6F7FA !important;
border-color: #DFE2E6 !important; border-color: #DFE2E6 !important;
color: #BABDC2 !important; color: #BABDC2 !important;
height: 100% !important;
} }
.hoverclass { .hoverclass {
@ -675,6 +684,7 @@ body {
.el-form-item__content { .el-form-item__content {
// width: 100%; // width: 100%;
flex: 1; flex: 1;
line-height: normal;
position: relative; position: relative;
.desc_right { .desc_right {

3
src/style/theme/index.css

@ -11204,6 +11204,9 @@ border-color:#006AFF !important;
border-color: #006aff border-color: #006aff
} }
.el-range-editor.el-input__inner:hover {
border-color: #006aff
}
.el-range-editor.is-active:hover { .el-range-editor.is-active:hover {
border-color: #006aff border-color: #006aff
} }

3
src/views/Register.vue

@ -1217,7 +1217,8 @@ export default {
.shortspan { .shortspan {
display: inline-block; display: flex;
align-items: center;
height: 38px; height: 38px;
margin: 0 12px; margin: 0 12px;
} }

189
src/views/elementGroups.vue

@ -18,22 +18,11 @@
<h3 for="">表格(表头自定义自定义渲染固定列)</h3> <h3 for="">表格(表头自定义自定义渲染固定列)</h3>
<GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton> <GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
<el-form>
<GuipTable :tableData="tableData" ref="multipleTable" @selectChange="handleSelectionChange" <GuipTable :tableData="tableData2" ref="multipleTable" @selectChange="handleSelectionChange"
:multiple="true" autoColumn="true" :loading="tableLoading"> :multiple="true" autoColumn="true" :loading="tableLoading" :border="true">
<!-- <template slot="header"> --> <!-- <template slot="header"> -->
<el-table-column width="180" fixed="left" label="名称(固定左)"></el-table-column> <el-table-column width="180" fixed="left" label="名称(固定左)"></el-table-column>
<!-- <el-table-column prop="type">
<template slot="header">
<GuipSelect class="custom-select" v-model="chktype" :options="type2filterOptions"
defaultValue="全部检测类型" @change="changeSelectType" />
</template>
<template slot-scope="scope">
{{ type2name[scope.row.type] }}
</template>
</el-table-column> -->
<el-table-column prop="created_at" label="时间" width="200"> <el-table-column prop="created_at" label="时间" width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="flex cell_render"> <div class="flex cell_render">
@ -44,8 +33,8 @@
'0' ? '文字居中' : '文字居中' }}</span> '0' ? '文字居中' : '文字居中' }}</span>
</GuipToolTip> </GuipToolTip>
<GuipToolTip content="图标居中"> <GuipToolTip content="图标居中">
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'" <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')"
:hoverColor="'#006AFF'" /> :color="'#8A9099'" :hoverColor="'#006AFF'" />
</GuipToolTip> </GuipToolTip>
</div> </div>
@ -59,8 +48,8 @@
scope.row.payment scope.row.payment
== ==
'0' ? '单元格局中' : '单元格局中' }}</span> '0' ? '单元格局中' : '单元格局中' }}</span>
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'" <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')"
:hoverColor="'#006AFF'" /> :color="'#8A9099'" :hoverColor="'#006AFF'" />
</div> </div>
</GuipToolTip> </GuipToolTip>
@ -69,24 +58,15 @@
</el-table-column> </el-table-column>
<el-table-column prop="name2" label="姓名" width="150"></el-table-column> <el-table-column prop="name2" label="姓名" width="150"></el-table-column>
<el-table-column prop="price" label="价格" width="150"> <el-table-column prop="price" label="价格" width="150">
<!-- <template slot-scope="scope"> <template slot-scope="scope">
<span @click="handlePriceClick(scope.row)">{{ scope.row.price }}</span> <span @click="handlePriceClick(scope.row)">{{ scope.row.price }}</span>
</template> --> </template>
<!-- 气泡弹出框 后期样式自定义-->
<!-- <template slot-scope="scope">
<el-popover trigger="click" placement="top">
<input type="text">
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.price }}</el-tag>
</div>
</el-popover>
</template> -->
</el-table-column> </el-table-column>
<el-table-column prop="address" label="地址1" width="150"> </el-table-column> <el-table-column prop="address" label="地址1" width="150"> </el-table-column>
<el-table-column prop="address" label="地址2" width="250"> </el-table-column> <el-table-column prop="address" label="地址2" width="250"> </el-table-column>
<el-table-column prop="address" label="地址3" width="150"> </el-table-column> <el-table-column prop="address" label="地址3" width="150"> </el-table-column>
<el-table-column prop="address1" label="地址测试" width="100"></el-table-column> <el-table-column prop="address1" label="地址测试" width="100"></el-table-column>
<el-table-column prop="price2" label="价格" width="300"> <el-table-column prop="price" label="价格" width="300">
<template slot-scope="scope"> <template slot-scope="scope">
<GuipSelect width="200px" @change="changeSelect(scope.row)" v-model="form.card" <GuipSelect width="200px" @change="changeSelect(scope.row)" v-model="form.card"
prop="card" :options="options" defaultValue="选项1" /> prop="card" :options="options" defaultValue="选项1" />
@ -105,28 +85,26 @@
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
:total="total"> :total="total">
</el-pagination> </el-pagination>
</el-form>
</div> </div>
<div class="flex">
<div>
<h3 for="">表格(带气泡框),内容自定义</h3> <h3 for="">表格(带气泡框),内容自定义</h3>
<el-form> <a href="/register">点击一下跳转参照页面</a>
<GuipTable :tableData="tableData2" :key="random()" ref="multipleTable" <!-- 暂时废弃此版本 -->
<!-- <GuipTable :tableData="tableData4" :key="random()" ref="multipleTable"
@selectChange="handleSelectionChange" :multiple="true" autoColumn="true" width="900px" @selectChange="handleSelectionChange" :multiple="true" autoColumn="true" width="900px"
:columns="columns" @confirm="onConfirm" @cancel="onCancel"> :columns="columns" @confirm="onConfirm" @cancel="onCancel">
<!-- 自定义姓名列的气泡框内容 -->
<template #popover-content-name="{ row, column }"> <template #popover-content-name="{ row, column }">
<div> <div>
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="排序" <GuipInput ref="GuipInput" width="252px" type="text"
:prop="column.label" placeholder="这是" /> v-model="row[`edit_${column.prop}`]" label="排序" :prop="column.label"
placeholder="这是" />
</div> </div>
</template> </template>
<template #popover-content-age="{ row, column }"> <template #popover-content-age="{ row, column }">
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="年龄" <GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" type="text"
:prop="column.label" placeholder="这是" unit="岁"> label="年龄" :prop="column.label" placeholder="这是" unit="岁">
</GuipInput> </GuipInput>
</template> </template>
<!-- 自定义地址列的气泡框内容 -->
<template #popover-content-address="{ row, column }"> <template #popover-content-address="{ row, column }">
<div> <div>
<p>自定义内容{{ column.label }}</p> <p>自定义内容{{ column.label }}</p>
@ -137,32 +115,33 @@
</el-select> </el-select>
</div> </div>
</template> </template>
</GuipTable> </GuipTable> -->
</el-form>
</div> </div>
<div class="ele-item"> <div class="ele-item">
<label for="">文本域</label> <label for="">文本域固定行数</label>
<GuipTextarea disabled :styleObject="styleObject" /> <GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="4" />
</div>
<div class="ele-item">
<label for="">文本域自适应高度</label>
<GuipTextarea :styleObject="{ width: '450px' }" placeholder="自适应高度" autosize />
</div> </div>
<div class="ele-item"> <div class="ele-item">
<label for="">输入框</label> <label for="">输入框</label>
<GuipInput ref="GuipInput" width="200px" height="30px" disabled placeholder="这是自定义默认提示语" /> <GuipInput ref="GuipInput" v-model="form.input1" width="200px" height="30px"
placeholder="这是自定义默认提示语" />
<div style="width: 20px;height: 10px;"></div> <div style="width: 20px;height: 10px;"></div>
<GuipInput ref="GuipInput" :styleObject="styleObject1" defaultValue="爱吃麻辣烫" :maxlength="100" <GuipInput ref="GuipInput" v-model="form.input2" :maxlength="100" @change="handleInput"
@change="handleInput" @blur="handleInput" @input="handleInput" @focus="handleInput" @blur="handleInput" @input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" />
placeholder="这是自定义默认提示语" />
<div style="width: 20px;height: 10px;"></div> <div style="width: 20px;height: 10px;"></div>
<GuipInput :defaultValue="defaultValue" @clear="handleClear" width="400px"> <GuipInput v-model="form.input3" width="400px">
<span slot="prependshow">http:</span> <span slot="prependshow">http:</span>
<img slot="prefix" src="../assets/radio_checked.svg" alt=""> <!-- <img slot="prefix" src="../assets/radio_checked.svg" alt=""> -->
<!-- 输入框后面小图标 -事件自定义 --> <!-- 输入框后面小图标 -事件自定义 -->
<i slot="suffix" class="el-icon-close" @click="handleClear"></i> <i slot="suffix" class="el-icon-close" @click="handleClear"></i>
<!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> --> <!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> -->
@ -219,8 +198,8 @@
</div> </div>
<div class="ele-item"> <div class="ele-item">
<label for="">文字按钮</label> <label for="">文字按钮</label>
<GuipButton type="text" >强引导</GuipButton> <GuipButton type="text">强引导</GuipButton>
<GuipButton type="grey" >弱引导</GuipButton> <GuipButton type="grey">弱引导</GuipButton>
</div> </div>
<div class="ele-item"> <div class="ele-item">
<label for="">独特按钮可以自定义划过时 图标图片文字颜色</label> <label for="">独特按钮可以自定义划过时 图标图片文字颜色</label>
@ -284,8 +263,8 @@
<div style="width: 800px;height: 150px;"> <div style="width: 800px;height: 150px;">
<h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3> <h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3>
<GuipInput ref="GuipInput" column="column" addClass="w510" label="age" desc="这是是右侧文案" v-model="form.age" <GuipInput ref="GuipInput" column="column" addClass="w510" label="age" desc="这是是右侧文案"
prop="age" placeholder="这是自定义默认提示语" /> v-model="form.age" prop="age" placeholder="这是自定义默认提示语" />
</div> </div>
<div class="ele-item"> <div class="ele-item">
@ -293,33 +272,6 @@
<GuipSwitch :modelValue="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange"> <GuipSwitch :modelValue="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
</GuipSwitch> </GuipSwitch>
</div> </div>
<el-table
:data="tableData3"
:span-method="objectSpanMethod"
:border="true"
style="width: 100%; margin-top: 20px">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
label="数值 1(元)">
</el-table-column>
<el-table-column
prop="amount2"
label="数值 2(元)">
</el-table-column>
<el-table-column
prop="amount3"
label="数值 3(元)">
</el-table-column>
</el-table>
<el-button type="primary" @click="submitForm">Submit</el-button> <el-button type="primary" @click="submitForm">Submit</el-button>
</el-form> </el-form>
@ -377,8 +329,8 @@
</div> </div>
<GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false" <GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false"
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose" :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
@dialogVisibleChange="dialogVisibleChange"> @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
<!-- 自定义内容 --> <!-- 自定义内容 -->
<div> <div>
<p>这是一个自定义内容的弹框</p> <p>这是一个自定义内容的弹框</p>
@ -469,6 +421,9 @@ export default {
form: { form: {
username: '', username: '',
language: '', language: '',
input1: '',
input2: '',
input3: '',
}, },
languageOptions: [ languageOptions: [
{ label: 'JavaScript', value: 'js', selectedLabel: 'JavaScripthhhhhhhhhh' }, { label: 'JavaScript', value: 'js', selectedLabel: 'JavaScripthhhhhhhhhh' },
@ -563,6 +518,44 @@ export default {
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' address: '上海市普陀区金沙江路 1518 弄'
}], }],
tableData4: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
price: '20',
age: 20,
//
edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎11',
address: '上海市普陀区金沙江路 151811 弄',
price: '10',
age: 30,
edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
price: '200',
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
// //
columns: [ columns: [
{ prop: 'name', label: '姓名(带气泡)', popover: true }, // { prop: 'name', label: '姓名(带气泡)', popover: true }, //
@ -617,7 +610,7 @@ export default {
label: "广州", label: "广州",
} }
], ],
tableData:[], tableData: [],
input: 'hahhahah', input: 'hahhahah',
defaultValue: 'asdasda', defaultValue: 'asdasda',
radio: 3, radio: 3,
@ -634,8 +627,9 @@ export default {
borderRadius: '4px', borderRadius: '4px',
}, },
styleObject: { styleObject: {
width: '200px', minWidth: '200px',
height: '40px' maxWidth: '400px',
// height: '40px'
}, },
styleObject1: { styleObject1: {
width: '600px', width: '600px',
@ -681,6 +675,9 @@ export default {
}, },
methods: { methods: {
changeInputtest(e) {
console.log(e, '---000changeInputtest');
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) { arraySpanMethod({ row, column, rowIndex, columnIndex }) {
console.log(row, column); console.log(row, column);
if (rowIndex % 2 === 0) { if (rowIndex % 2 === 0) {
@ -712,7 +709,7 @@ export default {
openMessage(type) { openMessage(type) {
console.log(type); console.log(type);
// //
switch(type){ switch (type) {
case 'success': case 'success':
this.$Message.success('成功,文案自定义') this.$Message.success('成功,文案自定义')
break; break;
@ -755,8 +752,8 @@ export default {
type: 0, type: 0,
cur_page: 1, cur_page: 1,
page_size: 5, page_size: 5,
},{ }, {
headers:{ headers: {
'AUTH': '3c901fa4a19a7ad9d01238890863d499' 'AUTH': '3c901fa4a19a7ad9d01238890863d499'
} }
}).then(response => { }).then(response => {
@ -829,8 +826,8 @@ export default {
onConfirm(row, prop) { onConfirm(row, prop) {
console.log('确认修改:', row, prop); console.log('确认修改:', row, prop);
this.$message.success('修改成功'); this.$message.success('修改成功');
this.$set(this.tableData, row) this.$set(this.tableData4, row)
console.log(this.tableData, 'this.tableData====='); console.log(this.tableData4, 'this.tableData=====');
}, },
// //
onCancel(row, prop) { onCancel(row, prop) {
@ -877,7 +874,7 @@ export default {
console.log(value, 'value===输入框输入得知'); console.log(value, 'value===输入框输入得知');
}, },
handleClear(value) { handleClear(value) {
this.defaultValue = '这是我清除后给的文案' this.form.input3 = '这是我清除后给的文案'
// this.handleInput('') // this.handleInput('')
console.log(value, 'value===qinghcu'); console.log(value, 'value===qinghcu');
}, },

17
vue.config.js

@ -1,4 +1,5 @@
const path = require('path'); const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = { module.exports = {
// publicPath: '/new/', // publicPath: '/new/',
devServer: { devServer: {
@ -25,6 +26,22 @@ module.exports = {
}, },
], ],
}, },
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
format: {
comments: /^\**!|@preserve|@license|@cc_on/i // 保留特定注释
}
},
extractComments: false // 不提取注释到单独文件
})
]
},
output: {
filename: '[name].[contenthash:8].js',
chunkFilename: '[name].[contenthash:8].js'
},
resolve:{ resolve:{
alias:{ alias:{
'@':path.resolve(__dirname, 'src/') '@':path.resolve(__dirname, 'src/')

Loading…
Cancel
Save