<
v-card
elevation
=
"0"
style
=
"border:1px solid #EAEBEE"
>
<
v-card-title
class
=
"text-body-1 mx-2"
style
=
"height:70px"
>
绑定
<
/v-card-title
<
v-divider
>
<
/v-divider
>
<
v-stepper v-model
=
"e1"
>
<
v-stepper-header
>
<
v-stepper-step :complete
=
"e1 > 1"
step
=
"1"
>
<
/v-stepper-step
>
<
v-divider
style
=
"flex:1"
>
<
/v-divider
>
<
v-stepper-step :complete
=
"e1 > 2"
step
=
"2"
>
<
/v-stepper-step
>
<
/v-stepper-header
>
<
v-stepper-items
class
=
"py-8"
>
<
v-stepper-content
step
=
"1"
>
<
v-card
elevation
=
"0"
height
=
"260"
class
=
"mb-10"
>
<
!
-- 微信二维码展示 --
>
<
!
-- WECHAT_RZKC登录 --
>
<
div
class
=
"d-flex flex-column align-center"
>
<
div
class
=
"darken-3 mb-4 text-center"
>
微信扫码绑定
<
div
style
=
"position:relative;"
>
<
!
-- 扫码成功 --
>
v-if
=
"scanSuccess"
class
=
"px-1 py-1 text-caption d-flex flex-column justify-center"
style
=
"width:160px;height:160px;overflow:hidden;background:#fff;opacity:.9;border:1px solid #000;top:0;left:0"
<
v-icon
size
=
"50"
color
=
"#07c160"
>
mdi-check-circle
<
/v-icon
>
<
div
class
=
"text-center text-button"
>
<
!
-- 二维码已过期 --
>
v-if
=
"isValid"
class
=
"px-1 py-1 text-caption d-flex flex-column justify-center"
style
=
"width:160px;height:160px;overflow:hidden;background:#fff;opacity:.9;border:1px solid #000;top:0;left:0"
<
v-icon
size
=
"50"
color
=
"#F5A623"
>
mdi-alert-circle
<
/v-icon
>
<
div
class
=
"text-center text-button mt-2"
>
二维码已过期
@click
=
"toRefresh"
class
=
"blue--text"
style
=
"cursor: pointer;"
>
刷新
<
/span
<
!
-- 绑定失败 --
>
v-if
=
"rzkcCode"
class
=
"px-1 py-1 text-caption d-flex flex-column justify-center"
style
=
"width:160px;height:160px;overflow:hidden;background:#fff;opacity:.9;border:1px solid #000;top:0;left:0"
<
v-icon
size
=
"50"
color
=
"#F5A623"
>
mdi-alert-circle
<
/v-icon
>
<
div
class
=
"text-center text-button mt-2"
>
@click
=
"toRefresh"
class
=
"blue--text"
style
=
"cursor: pointer;"
>
再试一次
<
/span
class
=
"px-1 py-1 text-caption d-flex flex-row justify-center"
style
=
"width:160px;height:160px;overflow:hidden;border:1px solid #000;background:#fff;"
id
=
"wechat_code"
ref
=
"wechat_code"
class
=
"mt-2 d-flex flex-row justify-center"
style
=
"color:#777;"
请使用微信扫码
<
/v-card
>
<
/v-stepper-content
>
<
v-stepper-content
step
=
"2"
>
<
v-card
elevation
=
"0"
class
=
"mb-10"
height
=
"260px"
>
<
div
class
=
"d-flex flex-column align-center"
>
<
div
class
=
"text-center"
>
微信账号绑定
<
v-sheet
color
=
"white"
elevation
=
"2"
height
=
"80"
width
=
"80"
class
=
"mt-4 rounded-circle"
<
v-img
contain
width
=
"80"
height
=
"80"
class
=
"rounded-circle"
:src
=
"
headimgurl == null
? require('@/assets/avatar.png')
: headimgurl
>
<
/v-img
>
<
/v-sheet
>
class
=
" mt-6 text-subtitle-1 text-center"
v-if
=
"login_name || nickname || fullname"
你好，
{
{
login_name
||
nickname
||
fullname
}
}
<
div
class
=
"mt-6 text-subtitle-1 text-center"
>
<
div
>
你即将绑定此微信账号
<
/div
>
<
div
>
后续可以使用此微信账号登录
<
/div
>
<
/v-card
>
<
div
class
=
"d-flex justify-center"
>
<
v-btn
color
=
"primary"
@click
=
"doBind"
>
<
/v-btn
>
<
v-btn
class
=
"ml-4"
text @click
=
"cancelBind"
>
<
/v-btn
>
<
/v-stepper-content
>
<
/v-stepper-items
>
<
/v-stepper
>
<
/v-card
>
<
/template
>
export
default
{
name:
"Binding"
,
data
(
)
{
return
{
e1:
"1"
<template> <div> <v-card elevation="0" style="border:1px solid #EAEBEE"> <v-card-title class="text-body-1 mx-2" style="height:70px" >绑定</v-card-title > <v-divider></v-divider> .
导入your-root.module.ts
import { BrowserModule } from '@angular/platform-browser' ;
import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ;
import { ErrorHandler , NgModule } from '@angular/core' ;
import { IonicApp , IonicErrorHandler ,
<template>
<!--
步骤
条
-
组件
-->
<div id="step-group" :style="{'--height': totalHeight+unit,'--width':totalWidth+unit,'--stepBorderColor':stepBorderColor}">
<div cl
stepper
电机
Vue
-
Stepper
组件
(
vue
-
stepper
-component)
A fully customizable
Stepper
component with
Vue
x support and Zero dependencies.
具有
Vue
x支持和零依赖性的完全可定制的
Stepper
组件
。
View Documentation
查看文档 Download Source...
npm install @ricadesign/
vue
-
stepper
import
Stepper
from '@ricadesign/
vue
-
stepper
'
Vue
. use (
Stepper
, { store , routes } )
< rica> </ rica>
@import ' ~@ricadesign/
vue
-
stepper
/dist/
stepper
' ;
您可以传递以下颜色道具来设置步进器样式。 当同时
使用
原色和辅助色时，将显示背景渐变。
Struts
待定文本颜色
完成文字颜色
图像路线也可以通过。
步骤
完成后，它将显示而不是数字：
Struts
路由设置–设置菜单相关的字段（权限、国际化的菜单名称、标记属于菜单部分的路由）
菜单数据组装–由路由参数配置和菜单权限数据组合成一个头部菜单数组
菜单渲染–利用element-ui动态渲染菜单
一、路由设置（PS：放在编辑器好看一点）
/* 静态页面路由 */
* 1、功能一：动态渲染头部菜单
* 1.1: 路由参数说明
* 1.1.1：menuPermission（当前菜单显示需要的权限）
* 1.1.2：subMenuType---当前路由的子路由命名（
van-
stepper
是在 Vant UI
组件
库中的一个步进器
组件
，其中 change 事件会在数值改变时触发。change 事件会传入一个参数，即当前改变后的数值。你可以在监听 change 事件时通过函数参数获取到这个数值，例如：
<v-
stepper
v-model="value" @change="handleChange" />
methods: {
handleChange(value) {
console.log(value)
在这个例子中，当数值改变时，`handleChange` 函数会被触发，其中的 `value` 参数即为当前的数值。你可以在函数中对这个数值进行处理。
