以前用 jquery ,实现有限的内容的无缝滚动蛮方便。vue 也一样方便。来喵喵。
实现步骤
完整的动画,经历了下边几个阶段:
- 对整个列表实现上移动画
- 将列表的第一个数据移动到最后一个,并且复位这个列表(虽然列表位置复位了,可数据在同一时间更新了。使得看不出变化)。
以前用 jquery ,实现有限的内容的无缝滚动蛮方便。vue 也一样方便。来喵喵。
完整的动画,经历了下边几个阶段:
如果既想用 bootstrap 框架,又想用 vue 的语法。那 bootstrap-vue 就是个不错的选择。
vue create btvue.cn
# 如果提示 bash: vue: command not found,那就是 vue cli 没有装。装一下。
# https://cli.vuejs.org/zh/guide/installation.html
npm install -g @vue/cli
# 然后再 vue create btvue.cn
# 就这样创建了一个基础的 vue 项目
cropperjs 很多年中,对处理图片裁切做的体验非常棒。几个项目中,也使用过。那时候还是使用 jquery 这种传统的方式。现在想整一个使用 vue 和 element ui 组合在一起的模板。
cropperjs: https://github.com/fengyuanchen/cropperjs
photo-editor:https://github.com/fengyuanchen/photo-editor
当初 flash 的 mask 可以做很多事情。 css 貌似也可以。先收留,后边再研究。
git 地址: https://github.com/hinesboy/mavonEditor
npm install mavon-editor
然后
# main.js
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
markdown 写技术博客的必须品。这里记录下 vue 中使用 tui-editor 的过程
代码: https://github.com/nhn/tui.editor
preview: https://ui.toast.com/tui-editor
npm install tui-editor
安装好后,先定义一个组件,我们在组件里组织 markdown 编辑器相关的逻辑。
那么就在 src/components/
下吧。
src/components/MarkdownEditor/index.vue
继续阅读
eleme ui 的 el-select 组件会自动清除数据空格,无论空格在左边,右边还是中间。某些场景下,这个让人难以接受, 怎么办了。方法是有的。
<el-select v-model="form.id" clearable placeholder="请选择">
<el-option
v-for="item in list"
:key="item.id"
:label="item.raw"
v-html="item.label"
:value="item.id">
</el-option>
</el-select>
# list 的内容
let list = [
{
id: 1,
label: ' 凤舞九天',
raw: '凤舞九天'
}
]
这样就可以了。babel 看情况需要,加上 v-html ,用 代替空格。
el-tree 蛮好使用的,就是排版的方向永远都是从上到下。同一级没办法,合向并着展示。那么,想要实现这种效果,就得自己改代码,操作了。
vue 中,el-tree 的默认节点和数据如下:
继续阅读
php artisan ui vue
yarn --no-bin-links
js/components/ 下会生一个 ExampleComponent.vue 文件。
js/app.js 中也引入了这个。
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
然后再 blade 模板中使用
继续阅读
laravel8 + bootstrap + vue-element-admin(9)修改 bootstrap 主题颜色等
先看一个漂亮的 点击看漂亮的
编辑 resources/sass/_variables.scss,增加下边的定义
// 定义主题颜色
$primary: #9c27b0 !default;
$success: #4caf50 !default;
$info: #00bcd4 !default;
$warning: #ff9800 !default;
$danger: #f44336 !default;
// 修改点击按钮的时候,按钮周围的边框,好难看,强迫症要干掉。这样会把input的边框也干掉了,不好。
$input-btn-focus-width: 0 !default;
$input-btn-focus-box-shadow: none !default;
然后,执行编译打包。
yarn run dev
打包好后,刷新登录页面,是不是发现 input框,按钮都变了呀。
主题颜色也变了,那么下一步去搞搞在 blade 中使用 vue 组件的问题。虽然大多时候不需要 vue,要不就用纯 vue 了。可偶尔某些组件用 vue 还是蛮好的。