.box {
width: 300px;
height: 300px;
border: 10px solid red;
/*
box-sizing: border-box; 不会去计算padding和border的值 元素的宽度就是给的宽度
border和padding计算入width之内
*/
box-sizing: border-box;
}
client: {
height: document.body.clientHeight,
width: document.body.clientWidth
}
var scope = this
window.document.body.onresize = function() {
scope.$set(scope.client, 'height', document.body.clientHeight)
scope.$set(scope.client, 'width', document.body.clientWidth)
}
import { mapState } from 'vuex'
...mapState(['m', 'n', 'g'])
this.$store.commit('st', 1)
// 验证是否是纯数字(包括0)
export function isNumbers(rule, value, callback) {
setTimeout(() => {
const re = /^[0-9]\d*\,\d*|[0-9]\d*$/
const rsCheck = re.test(value)
if (!rsCheck && value !== '') {
callback(new Error('请输入数字'))
} else {
callback()
}
}, 0)
}
// 文本换行转<br/>
export function preText(pretext) {
if (!pretext || pretext === '' || pretext === undefined) return ''
const reg = new RegExp('\n', 'g')
const txt = String(pretext).replace(reg, '<br/>')
return txt
}
service.interceptors.response.use(
response => {
},
error =>{
})
service.interceptors.request.use(
config => {},
error=>{})
import Cookies from 'js-cookie'
Cookies.set('token', '00000')
本文探讨了CSS中box-sizing属性的作用及其在不同情况下的应用,特别是在结合Vue框架进行响应式网页设计时的实践。通过示例代码,展示了如何使用box-sizing:border-box来避免元素宽度计算中的常见陷阱,同时介绍了Vue中使用$set方法更新响应式数据的技巧。
1608

被折叠的 条评论
为什么被折叠?



