1.Use of v-model on custom components
Sliding verification page
https://segmentfault.com/a/1190000019917624
//1.mixin
import { Vue, Component, Prop } from 'vue-property-decorator'
@Component
export default class TwoWay extends Vue {
@Prop()
value!: any;
get currentValue() {
return this.value;
}
set currentValue(newVal: any) {
this.$emit('input', newVal)
}
}
//2.my-child-compnent.vue
<template>
<input v-model="currentValue" />
</template>
<script lang="ts">
import { Vue, Component, Mixins } from "vue-property-decorator";
import TwoWay from "path/to/two-way";
@Component
export default class MyChildComponent extends Mixins(TwoWay) {
mounted() {
this.currentValue = 2;
}
}
</script>
//3.parent-component.vue
<template>
<children-component v-model="foo"></children-component>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component
export default class ParentComponent extends Vue {
foo = 1;
}
</script>
The above code implements: when the value in the input in the child component is modified, the foo attribute of the parent component will be modified synchronously.
When the value of currentValue is modified in a subcomponent (js operation in mounted, or two-way binding with <input>), the set() function of currentValue is triggered. In set(), we do not modify any value directly, but $emit In the event, the parent component modifies the original binding data (implemented by v-model in the parent component), thereby triggering the get() of currentValue in the child component to achieve data synchronization and complete a cycle of two-way binding.
Advanced usage of emit update:modelValue · Notes · Kanyun Kanyun is a modern document writing, hosting and digital publishing platform, based on MarkDown syntax and Git repository management, allowing you to focus on knowledge creation, and can be used for enterprise knowledge bases and products Manuals, project documents and personal digital publishing. https://www.kancloud.cn/dabaitu/chendenan/3162870#vmodel__modelValue__app_71 Record it first and wait for verification
2. Center the pseudo-element icon and text
<div class="fmgk-total-title">Total number of style review projects</div>
.fmgk-total-title {
vertical-align: center;
& amp;::before {
display: inline-block;
content: '';
width: 24px;
height: 24px;
background: url(~@/assets/layout/right/fmgk/fmgk-tilte-icon.png) no-repeat;
background-size: cover;
vertical-align: middle; // Mainly rely on this sentence
}
}
After setting background:url(…) for the pseudo element, background-size needs to be set to display the image.
3. The last box of flex layout occupies an exclusive row
How to make the last element occupy an exclusive row in flex layout? – Yuuk’s bloghttps://www.430115.com/article/816
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">I own a row</div>
</div>
.container {
display: flex;
justify-content: space-between; /* Align both ends */
}
.item {
flex-grow: 1; /* The element automatically allocates width */
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
height: 60px;
line-height: 60px;
}
.item:nth-last-child(1){
flex-basis: 100%;
}
4.nignx configuration and vue configuration publicPath
server {
listen 9260;
\t\t
location /api/ {
proxy_pass http://10.14.2.199:9239/;
}
location /gisApi {
proxy_pass http://10.14.2.168:6080/arcgis/rest/services;
}
location /filelib {
root D:/city-appearance-ue-v2.1/data;
autoindex on;
}
location /bmcs {
proxy_pass http://10.14.2.168:8128/;
}
location /skyline/ {
proxy_pass http://10.14.3.140:9999/;
}
location /fileView {
root D:/sixSpecial/attachment/720;
}
location/{
root D:/city-appearance-ue-v2.1/business;
try_files $uri $uri/ /index.html;
}
location /admin {
root D:/city-appearance-ue-v2.1;
try_files $uri $uri/ /admin/index.html;
}
}
Why is it configured like above?
First of all, the path after location refers to the path intercepted when requesting. For example, 199:9260/ will be intercepted to the /business folder, and 199:9260/admin will be intercepted to the root.
When admin sets publicPath, as shown below, the /admin prefix will be added to the public packaged files.
5.div prohibits text selection
1. Disable selection of the entire <div> element:
div {
-webkit-user-select: none; /* Chrome/Safari/Opera */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /*Default user selection */
}
2. Disable selection of some text in the <div> element:
div::selection {
background-color: transparent;
}
In the above code, we use the ::selection pseudo-element of CSS to modify the background color of the selected text to be transparent. In this way, when the user selects the content of the <div> element, he will only see the border of the selected text and cannot see the background of the actual selected part.
3. Disable selection of the content of the <div> element on mobile devices:
div {
-webkit-touch-callout: none; /* Disable long press gesture pop-up menu */
-webkit-user-select: none; /* Disable users from selecting text */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /*Default user selection */
}
In the above code, we use a series of CSS properties to disable the selection of the content of the <div> element on mobile devices. Among them, the -webkit-touch-callout attribute is used to disable the long press gesture pop-up menu, and the -webkit-user-select, -khtml-user-select, -moz-user-select and -ms-user-select attributes are used to disable users Select text.
Disable selection of div – Front-end Laobaihttps://www.yzktw.com.cn/post/1559707.html
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry skill treeHomepageOverview 39220 people are learning the system