<
div
id
=
"userLayout"
:class
=
"['user-layout-wrapper']"
>
<
div
class
=
"container"
>
<
div
style
=
"width:1300px;height:200px;margin:0 auto;background:#f0f0f0;"
>
<
div :class
=
"changeID===2?'rowRecord':'rowRecord1'"
>
<
div :class
=
"[item.id===changeID?'itemReocrd':'itemReocrd1']"
@click
=
"selectId(item)"
v-for
=
"item in content"
:key
=
"item.id"
>
<
div
class
=
"contss"
v-if
=
"item.id===changeID"
>
<
/template
>
<
script
>
export
default
{
name:
'UserLayout'
,
data
(
)
{
return
{
content:
[
{
id:1,
}
,
{
id:2,
}
,
{
id:3,
}
,
{
id:4,
}
,
{
id:5,
}
,
{
id:6,
}
,
]
,
changeID:0,
methods:
{
selectId
(
item
)
{
this.changeID
=
item.id
<
/script
>
<
style
lang
=
"less"
scoped
>
.contss
{
width:140px
;
height:200px
;
background:
border-radius:10px
;
margin-right:20px
;
animation:
2
.5s opacity2
;
animation-fill-mode:forwards
;
@keyframes opacity2
{
from
{
width:140px
;
margin:0 auto
;
}
to
{
width:330px
;
margin:0 auto
;
}
0
%
{
opacity:0
}
25
%
{
opacity:.25
;
}
50
%
{
opacity:.5
;
}
75
%
{
opacity:.8
;
}
100
%
{
opacity:1
;
}
.rowRecord1
{
width:900px
;
height:200px
;
margin:0 auto
;
.rowRecord
{
width:900px
;
height:200px
;
margin:0 auto
;
animation:mymoves 1s
;
animation-fill-mode:forwards
;
@keyframes mymoves
from
{
width:900px
;
margin:0 auto
;
}
to
{
width:1100px
;
margin:0 auto
;
}
.itemReocrd1
{
width:140px
;
height:200px
;
margin-right:10px
;
background:
border:1px solid
border-radius:10px
;
float:left
;
.itemReocrd
{
width:140px
;
height:200px
;
border-radius:10px
;
margin-right:10px
;
float:left
;
animation:mymove 2s
;
animation-fill-mode:forwards
;
@keyframes mymove
from
{
width:150px
;
margin:0 auto
;
}
to
{
width:350px
;
margin:0 auto
;
}
<
/style
>
electron+
vue
cli3 实现
设置
打印机，静默打印小票功能
git clone https://github.com/sunniejs/electron-
vue
-print-
demo
.git
npm install
npm run electron:serve
1.用户点击打印
2.查询本地 electron-store(用来向本地存储，读取数据)是否存打印机名称
3.已经
设置
，直接打印
4.没有
设置
，弹出
设置
打印机框
5.用户
设置
好确认后打印
有什么问题可以提 issue 或扫描微信二维码跟我联系，项目持续优化，加群获取最新更新消息
您可以扫描添加下方的微信并备注 Sol 加交流群，给我提意见，交流学习。
如果对你有帮助送我一颗小星星（づ￣3￣）づ╭:red_heart:～
@zebing/babel-plugin-
vue
-
css
-modules
@zebing/babel-plugin-
vue
-
css
-modules 是一个
vue
css
modules智能转化插件。让你在使用
vue
css
modules的同时，无需通过:class="$style.
css
name", class={styles.
css
name}等繁琐的方式调用，而是直接 class="
css
name", class="
css
name"简单调用，极大的减小工作量，增加开发效率。
目前暂不支持
vue
2.0 的template方式。仅支持
vue
3.0和
vue
2.0的jsx方式
如何使用?
npm install @zebing/babel-plugin-
vue
-
css
-modules --save-dev
在.babelrc 配置文件中加入配置
"plugins": ["
transition-timing-function
transition-delay
注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。
all 0 ease 0
CSS
3
JavaScript 语法：
object.sty
ag-grid-
vue
的cellEditorParams可以通过
设置
css
来控制编辑器的样式。你可以在参数中添加一个
css
Class属性来
设置
编辑器的样式。例如：
<ag-grid-
vue
:columnDefs="columnDefs"
:rowData="rowData"
<ag-grid-
vue
-cell-editor
:cellEditorParams="{
css
Class: 'my-custom-class', values: values}"
v-slot="{value, onInput}"
<select v-model="value" @input="onInput">
<option v-for="val in values" :value="val">{{ val }}</option>
</select>
</ag-grid-
vue
-cell-editor>
</ag-grid-
vue
>
在这个例子里，编辑器会应用名为'my-custom-class'的
css
类。
