0. Modify the element-UI component on a single page
Vue uses scoped to indicate that its styles apply to the current module to avoid styling contamination between components. Penetrates scoped with the /deep/ operator with Spaces between.
<style scoped>
div /deep/ .el-header {
background-color: #67c23a;
line-height: 60px;
}
</style>
Copy the code1. In the edit page, the back end returns data. Auto_create_group returns 0 when el-switch is enabled and 1 when el-switch is disabled. That is, change the true and false of the control switch to numeric representation.
Active-value =”0″ v-bind:active-value=”0″ v-bind:active-value=”0″
<el-switch
v-model="form1.auto_create_group"
:active-value="0"
:inactive-value="1"
>
</el-switch>
Copy the code2. In the list page, the backend returns data. In the row, enable is displayed when status==0, and Disable is displayed when status==1.
Note: Scope slots with slot-scope attributes have been deprecated since 2.6.0.
<el-table-column label="State">
<template slot-scope="scope">
<span v-if="scope.row.status == 0">To enable the</span>
<span v-if="scope.row.status == 1">disable</span>
</template>
</el-table-column>
Copy the code3. Add a progress bar to the list page to display progress information when the mouse hover.
2. Background-color: RGB(25, 136, 252, 0.4); The last parameter indicates a range of transparency between [0,1], where 0 is completely transparent,1 is completely opaque, and 3. Common single-line text overflow displays ellipsis white-space: nowrap; Text-overflow: ellipsis; // Display ellipsis when text overflow contains elements; overflow: hidden; 4. Implement "overwrite" requires relative and absolute positioningCopy the code <el-table-column prop="chat_ids" label="Join a group chat." width="140">
<template slot-scope="scope">
<! This part is the Tooltip text prompt -->
<el-tooltip placement="right">
<div slot="content">
<div v-for="(item, index) in scope.row.chat_ids" :key="index">
{{ scope.row.chat_ids[index].name }} {{scope.row.chat_ids[index].people}}% progress {{scope.row.chat_ids[index].progress}}%</div>
<span>Note: Progress is calculated by (current group size ÷ 200)</span>
</div>
<! This part is to draw the progress bar for the list.
<div>
<div
v-for="(item, index) in scope.row.chat_ids"
:key="index"
style=" border: 1px solid #dcdfe6; border-radius: 3px; margin-top: 4px; display: block; width: 100px; position: relative; box-sizing: border-box; "
>
<! -- The entire progress bar is 100px, and each piece of data is directly converted to PX based on the actual percentage -->
<div
style=" position: absolute; Background-color: RGB(25, 136, 252, 0.4); z-index: 1; left: -1px; "
:style=" 'width:' + scope.row.chat_ids[index].progress + 'px' "
>
</div>
<div
style=" position: relative; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; z-index: 2; "
>
{{ item.name }}
</div>
</div>
</div>
</el-tooltip>
</template>
</el-table-column>
Copy the code
4. Write mobile paging components with elementUI (first and last page buttons disabled)
First and last page buttons disabled: Use V-if to control currentPage — equal to 1, equal to allPage, somewhere in between
<div class="pagination">
<div class="pageButton" v-if="currentPage > 1" @click="prevPage">The previous page</div>
<div class="disButton" v-if="currentPage == 1">The previous page</div>
<div class="pageButton">Page {{currentPage}}</div>
<div class="pageButton" v-if="currentPage ! = allPage" @click="nextPage">The next page</div>
<div class="disButton" v-if="currentPage == allPage">The next page</div>
</div>
<div>
Copy the code nextPage() {
this.currentPage = this.currentPage + 1;
// this.listpost();
// this.$emit('setPage', this.currentPage + 1)
},
prevPage() {
this.currentPage = this.currentPage - 1;
// this.listpost();
// this.$emit('setPage', this.currentPage - 1)
},
setPage(page) {
this.currentPage = page;
console.log(this.currentPage);
},
Copy the code .pagination {
width: 100%;
margin: 10px auto;
display: inline-flex;
justify-content: space-between;
height: 40px;
}
.pageButton {
line-height: 40px;
text-align: center;
width: 32%;
border-radius: 4px;
box-shadow: 1px 2px 12px 0 rgb(0 0 0 / 8%);
color: # 003770;
// font-size: 14px;
font-weight: 600;
}
.disButton {
line-height: 40px;
text-align: center;
width: 32%;
border-radius: 4px;
box-shadow: 1px 2px 12px 0 rgb(0 0 0 / 8%);
color: rgb(0 0 0 / 8%);
// font-size: 14px;
font-weight: 600;
}
Copy the code
5. Move the navigation bar at the bottom of the terminal
This.$router. Push ()
<template>
<div class="tab-fill-height">
<div class="tab-position-fixed">
<! -- <div class="bar"> -->
<div class="barItem" @click="runToMain">
<div class="iconfont icon-faxian"></div>
<div>Stargazing plate</div>
</div>
<div class="barItem" @click="runToEC">
<div class="iconfont icon-erweima"></div>
<div>Employees live code</div>
</div>
<div class="barItem" @click="runToGLC">
<div class="iconfont icon-erweima1"></div>
<div>Infinite group live code</div>
</div>
<div class="barItem" @click="runToMF">
<div class="iconfont icon-yingyong"></div>
<div>More applications</div>
</div>
</div>
<! -- </div> -->
</div>
</template>
<script>
export default {
methods: {
runToMain() {
this.$router.push({
path: "/mobile/main"}); },runToGLC() {
this.$router.push({
path: "/mobile/xxx"}); },runToEC() {
this.$router.push({
path: "/mobile/xxx"}); },runToMF() {
this.$router.push({
path: "/mobile/xxx"}); ,}}};</script>
<style lang="scss" scoped>
.tab-fill-height {
width: 100%;
height: 70px;
}
/* compatible with iphoneXR bottom cover small black bar */
@supports (bottom: env(safe-area-inset-bottom)) {
.tab-position {
padding-bottom: calc(-70px + env(safe-area-inset-bottom)); }} // Absolute positioning.tab-position-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 70px;
z-index: 999;
display: flex;
align-items: center;
justify-content: space-around;
background: #fff;
color: #409eff;
border-top: 1px solid #ddd;
}
.barItem {
width: 25%;
line-height: 35px;
text-align: center;
font-size: 14px;
}
</style>
Copy the code
6. Control add-ons (using weUI components)
Ideas:
Click Add Attachment to judge whether the maximum number of added attachments is reached. If not, the picker will pop up. After selection, the corresponding attachments will be added to the list and v-IF will be used to control the display of corresponding attachments.
Wait for Vue to finish updating the DOM after the data changes. You can use vue.nexttick (callback) immediately after the data changes. This callback will be called after the DOM update is complete.
Weui was introduced in 6.1 index.html
Added to 6.1.1 HEAD
< link rel = "stylesheet" href = "https://bos.static.bearyu.com/lib/element-ui/2.15.6/theme-chalk/index.min.css" >
6.1.2 Body added
< script type = "text/javascript" SRC = "https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js" > < / script >
6.2 Configure externals in vue.config.js
externals: {
'vue': 'Vue'.'weui': 'weui'.'weui.js': 'weui.js',},`
Copy the code6.3 Page Implementation
<div v-for="(item, index) in attachments" :key="index">
<div class="partTitle" style="height:20px;">
<span style="line-height:20px;">Attachment {{index + 1}}</span>
<i
class="el-icon-delete"
@click="delAttach(index)"
style="float:right; color:red; line-height:20px;"
></i>
</div>
<div v-if="item.mediaType === 1">
<el-row>
<el-form-item label="Image" >
<el-upload
>
<img
/>
<i v-else class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-row>
</div>
</div>
<div @click="addMoreAttach"
v-show="attachments.length < 9">
<i class="el-icon-circle-plus" style="margin-right: 5px"></i>
<span>Add attachments (up to 9)</span>
</div>
<div class="warn" v-show="attachments.length == 9"
>Up to 9 attachments </div ></div>
Copy the code/* Add attachments */
addMoreAttach(item) {
if (this.attachments.length === 9) {
return;
} else {
this.addFile(item);
console.log("qql",item); }},/* weui的piker */
addFile(item) {
var _this = this;
weui.picker(
[
{
label: "Image".value: 1}, {label: "Link".value: 2}, {label: "Applets".value: 3}, {label: "Group".value: 4}, {label: "Video".value: 5,}, {onChange(result) {},
onConfirm(result) {
var index = result[0].value;
_this.$nextTick(() = > {
_this.attachments.push(JSON.parse(JSON.stringify(atchModel)));
});
console.log("_this.attachments",_this.attachments); atchModel.mediaType=index; }}); },Copy the code