- 博客(22)
- 收藏
- 关注
RSS订阅原创 uni-app导入全局样式
打开App.vue文件，在style标签里面添加以下代码，即可全局引入css了，需要注意的是，不是在main.js文件中。
2023-02-08 10:57:55
1026
原创 Vuex-state
在 Vue 组件中获得 Vuex 状态由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性,中返回某个状态*Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）new Vue({ store, render: h => h(App)}).$mount('#app')通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能
2022-03-31 16:21:54
137
原创 vuex-getter
前言有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数，如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。computed: { doneTodosCount () {
2022-03-31 16:21:23
157
原创 vuex-mutations
前言更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数const store = new Vuex.Store({ state: { count: 1 }, mutations: { //increment 事件类
2022-03-31 16:20:57
81
原创 vue-action
前言Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.
2022-03-31 16:20:35
1117
原创 Vue中extend组件构造器
vue-创建构造函数Vue.extend属于Vue的全局API在业务开发时的很少使用，但是在一些独立组件开发场景中， Vue.extend( options )+$mountVue.extend( options )参数：{Object} options 用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数<div id="mount-point"></div&
2022-03-30 19:00:22
1575
原创 vue less使用全局变量
vue less使用全局变量首先安装一个包npm i style-resources-loader vue-cli-plugin-style-resources-loader -D在vue.config.js中添加以下配置 pluginOptions: { 'style-resources-loader': { preProcessor: 'less', //'./src/style/variable.less'为自己定义的变量文件路径 pat
2022-03-29 00:38:40
372
原创 vue-render函数
vue-render函数模板与渲染函数#Vue 被编译成虚拟 DOM 渲染函数。Vue 还提供 API 允许我们跳过编译步骤并直接编写动态函数。在处理高度的逻辑时，渲染函数比模板更灵活，因为您可以使用 JavaScript 的全部功能来处理vnode。模版与渲染函数（render（））<script>export default { name: 'Icon', created () { console.log('create') }, mounted ()
2022-03-28 21:19:10
124
原创 require.context实现前端工程自动化
require.context实现前端工程自动化webpack的api，主要用来实现自动化导入模块，在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块require.context()函数接受三个参数1，directory {String} -文件夹路径2，useSubdirectories {Boolean} -是否遍历文件的子目录3，regExp {RegExp} -匹配文
2022-03-28 15:19:30
305
原创 style动态换肤
style动态换肤reset.scss清除标签的默认样式html,body { height: 100%; overflow: hidden; font-weight: 400; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;}html,body,div,span,object
2022-03-28 12:47:06
557
原创 webpack
webpack一、 准备新建项目文件cd 项目文件夹npm init -y二、安装·局部安装npm install --save-dev webpack@<version>npm install --save-dev webpack-cli·全局安装npm install --global webpacknpm install --save-dev webpack-cli安装后文件目录三、创建一个 bundle将“源”代码(/src)从我们的“分发”代码(
2022-03-28 11:52:41
50
原创 CSS 三列布局 - 双飞翼布局
CSS 三列布局 - 双飞翼布局双飞翼布局是在圣杯布局上做了优化，解决了圣杯布局中布局发生错乱的问题。核心思路是在圣杯布局的基础上，再在内容区添加一层新的盒子，该盒子通过外边距将内容与两边的浮动元素分隔开，实际上中心盒子是没有"padding"属性的。首先给类名为"container"的盒子添加"overflow: hidden"属性，解决子浮动元素导致的高度塌陷问题。然后继续给类名为"left"的盒子添加"float: left"、“margin-left: -100%“和"width: 100px
2022-03-26 20:33:15
151
原创 css 三列布局 圣杯布局
css 三列布局 圣杯布局不像Flexbox或Grid布局可以控制元素显示的次序，圣杯布局是通过浮动元素和外边距属性实现三列布局，但最重要的一点是，在文档中需要将优先渲染的内容写在最前方，但显示时看起来却好像是按照显示次序书写的一样。 首先给类名为"container"的盒子添加"overflow: hidden"和"padding: 0px100px"属性，以为了防止容器盒子高度塌陷和给之后的左、右浮动元素预留位置。现在继续给类名为"left"的盒子添加以下属性：“float: left”，浮
2022-03-26 20:25:42
111
原创 css三列布局-flex
css三列布局-flex相比于浮动和定位，使用Flexbox布局实现三列布局要更好，因为弹性容器的高度会根据最高的弹性项进行修正，不会出现明显的台阶式效果。Flexbox实现三列布局的特点为简单、使用、强大，核心思路为设置中间内容盒子的"flex: 1"属性，让中间内容区的宽度自适应，独自占据弹性容器的全部剩余空间。 现在给类名为"container"的盒子添加"display: flex"属性，使该盒子成为弹性容器。再给类名为"left"和"right"的盒子添加"width: 100px"属性，最
2022-03-26 19:42:29
2302
原创 css三列布局-绝对定位
css三列布局-绝对定位使用绝对定位实现三列布局，实际上是和之前使用绝对定位实现双列布局同一个原理。主要思路是，两边通过绝对定位定位到父盒子的左、右边框上，再根据实际的需要设置两边盒子的宽度，高度是根据内容自适应的。中间内容区通过定位属性左、右自适应宽度。 现在给类名为"container"的盒子添加"position: relative"，该属性使子元素可以相对该盒子做定位。继续给类名为"left"的盒子添加"position: absolute"、“left: 0px"和"width: 100px
2022-03-26 19:34:12
516
原创 css三列布局-float
css三列布局-float使用浮动实现三列布局的注意点是浮动元素需要写在内容元素之前，否则布局是混乱的。这种方式实现三列布局是优点是简单、兼容性好，但缺点是需要清除浮动，否则父盒子的高度无法撑开，可能会导致其他页面元素的布局混乱。 首先给类名为"container"的盒子添加"overflow: hidden"属性，该属性可以使盒子成为BFC，处理浮动元素父盒子高度塌陷的问题。再给类名为"left"的盒子添加"float: left"和"width: 100px"两条属性，首先往左浮动，宽度这里设置1
2022-03-26 19:28:11
322
原创 css双列布局-grid
css双列布局-grid使用Grid网格布局实现双列布局的要点在于列数为2，且首列的宽度根据需要自行设置，第二列使用片段"fr"属性进行自适应即可。行数不需要指定，每行会根据内容高度进行自适应缩放。 现在给类名为"container"的盒子添加"display: grid"属性，使该盒子成为容器。再给该容器添加"grid-template-columns: 100px 1fr"属性，表示第一列宽度始终为100px，第二列的宽度为剩余的所有空间。此时可以看到整个容器的高度因为首列的内容被撑开了，并且右边
2022-03-26 19:14:55
1821
原创 css双列布局-flex
css双列布局-flex通过Flexbox可以快速实现双列布局，主要通过"flex: 1"这条弹性项属性给内容区申请到父盒子的所有剩余空间，并且可以给弹性项设置"position"属性调整弹性项内部的子盒子细节。 现在给类名为"container"的父盒子添加"display: flex"属性，使该盒子成为弹性盒容器。继续给类名为"left"的弹性项盒子添加"width: 100px"属性。最后给类名为"right"的弹性项盒子添加"flex: 1"属性。由于弹性项盒子默认占满弹性容器盒子的所有高度，
2022-03-26 19:04:48
1378
原创 css双列布局 - 绝对定位
css双列布局 - 绝对定位通过绝对定位实现的双列布局看起来会比较僵硬，因为父盒子首先需要设置定位属性并且父盒子的高度无法被子盒子撑开，如果子盒子的高度是自适应的，那么父盒子的高度也就无法确定从而设置了，但优点是设置属性比浮动来得更直观。 现在给类名为"container"的父盒子添加"position:relative"属性，为了保证子盒子绝对定位时不会根据html元素定位。继续给类名为"left"的盒子添加"position:absolute"、“left: 0"和"width:100px"三条
2022-03-26 18:59:33
210
原创 css双列布局-浮动
css布局-双列排序现在给类名为"container"的父盒子添加"overflow: hidden"属性，使该父盒子成为BFC。继续给类名为"left"的盒子设置"float: left"和"width: 100px"属性，使该盒子成为浮动元素并且需要一个固定的宽度。最后再给类名为"right"的盒子设置左外边距"margin-left: 100px"属性，该属性值需要和左浮动的盒子宽度一致。此时父盒子的高度会根据左边浮动元素、右边内容区中高度较高的一方进行计算，并且右边内容区的宽度自适应，最好
2022-03-26 18:49:53
138
原创 css浮动-清除浮动
css浮动-清除浮动clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素
2022-03-26 18:33:06
52
原创 vue条形进度条
<template><div class="Bar"><div class="text">00:00</div><div class="bar" id='bar'><span class="botten" id="botten"></span></div><div class="text">00:01</div></div></templa
2021-11-25 22:10:38
588
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人