svg的使用: https://blog.csdn.net/userkang/article/details/84770843
很好! 但是我还看不懂什么的
element 简单的响应式布局 https://www.jianshu.com/p/ff03b969b724
#dedede 比#a9a9a9 会好很多~
因为颜色浅了 a9看上去就是灰色的qwq 比1px还粗粗
=============================
我上面做了导航栏,然后锚点定位的时候
有个问题 这个时候直接
padding-top:-80px(导航栏顶部的高度) 就好了
啊qwq cursor取消设置 使用cursor:default
如果是none的话就会鼠标失去 失去鼠标了qwq
=====================
点击后跳转
1 html a 锚点
2 document.querySelector(".app-wrapper").scrollIntoView();
scroll into qwq
直接跳到视图所对应的位置去了qwq 嗯嗯嗯
==============================
okok 编辑html 不太行那么点击change到html 然后再转化回来~
<li>里面想嵌套 要<li><ul><li></li></ul></li>才有效果
chorme 安全策略 在快捷方式那边 直接右键 在.exe后面加上那行hua
--disable-web-security --user-data-dir
over
========================
好吧 顶部栏也要从顶部到底部的更新
那么设置了flex
display: flex;
flex-wrap: wrap;
flex: 0 0 25%;
===================================
v-for的奇奇怪怪排列从6行到4行的更新
<ul v-for="(item,index)?in?listBig.slice(0,3)" :key="index">
<li>{{item.title}}</li>
<li
v-for="(itemm,indexx) in item.rows"
:key="indexx"
@click="toDocument(index,indexx,itemm.id)"
>{{itemm.title}}</li>
</ul>
<ul >
<li>常见问题</li>
<li @click="toDocument(3,0,367)">常见问题</li>
<li @click="toDocument(4,0,368)">隐私政策</li>
<li @click="toDocument(5,0,369)">用户协议</li>
</ul>
然后 还有 一个下面不能有相同的两个
v-for和v-if不能同时出现
所以还是slice 注意splice不行 直接[3]也不行 上面那个好像是左闭右开区间. index是从0开始..
=================================
啊啊啊啊啊啊。
视图不更新的问题。。。
试了object.assign $set .native.click 都没用
但是有点玄幻的是 点击显示有 点击隐藏却消失不了了_(:з」∠)_
试了一下打印 已经改变 只是没有实时更新 (不知道为什么 可能 是因为对象的指向问题? 明明只是赋值了一个小的 还是可以一起触发整个大的更新..)
后来 傻了吧唧的 把{{}} 里面的和隐藏显示一起改 就好了
也太傻了 因为显示是有用的 qwq 先就
=============================
name前面有冒号,说明后面是一个变量或者表达式,没加冒号就是固定的字符串
需要async 和await 不然 你会发现...
你会发现传不进来
因为先进去就走完了
async getDetail(passageId){
let res =await axios.get(
"https://mapi.xxxxxx.com/v1/article/view?id=" + passageId,
{}
);
if (res.status === 200) {
this.psgtitle=res.data.title;
this.psgcontent=res.data.content;
}
},
然后我又发现我二维数组不会 只能摸索着前行qwq qwq就..
这几行代码 宝贵的实战经验... 太宝贵了qwq
this.listBig[indexxx].rows = res.data.rows;
for(let j=0;j<this.listBig[indexxx].rows.length;j++){
console.log(this.listBig[indexxx].rows[j].title);
}
为什么1可以 换index就报错ne?
因为你超过限度了 越界了啊大哥 很危险的qwq 就 就
然后v-for那种写法是很好的我们知道 好的所以我们可以获取到了qwq
还有就是 从0开始到5 而不是1到6 因为前面会有多的你知道吧qwq 还是记录一下吧 反正项目里面用...
===================================
吓人人 axios无效
我.. 我咋去掉this 就解决了qwq
最后 搜搜咋个搜
==============================
滚动条, 竟然如此简单
直接.tac{
height: 80%;
overflow: hidden;
overflow-y:auto;
}
即可解决 overflow-y 真好啊 还是要学会搜索啊 啊
====================
我 是用了el-collapse 来解决的。但是其实不用! 直接我门来
el-menu el-submenu 还有group什么的qwq 都可以~~~ 而且 定制起来更容易…………………… (我就说 怎么可能那么难用了嘛)
==================================
看一下
新闻动态怎么的~ 然后我也接一下~~
1 进去之后肯定是先到index.vue
这个时候 就只是
(1)上来就先getNews(挂载时候调用
【使用的async 如果这里堵住 就继续往下走qwq、】
let res= await
this.axios.get(..)
然后 还多了一行分号qwq.
(2)如果返回200,那么就同步一下呗 不然就是空的
【news+dataCount】
news:[] 只有这两个o
这样一下也不用单独写个js了 直接把路径的名字都给装好了qwq!
(啊 好像真的避免了.then qwq)
(3) 怎么写呢
v-for="(item, $index) in news"
:key="$index"
@click="toDetail(item.tid)"
那应该再去请求tid呗qwq 每一个click都是不通过的toDetail tid 这里用光了query去查询
img的话要:src="item.smeta"来绑定。布局整好就好了… 行
(4)如果没有pageindex 就是1 然后发请求查询
2.下面的detali直接 v-html还行.... 太厉害了哈哈哈
(4).可以可以。为什么楷体写这些东西这么舒服
==================================================
好像忽然知道了!原来是因为
min-height 而已吧qwq 设置了一个800 然后怎么缩放都没关系了
谁知道呢 不过 也并不一定
https:/cxxxxxxx/content/index/gettitle?bk=2&facility=MOBILE&num=5&page=1
========================================================
上周的
1 el-table
然后template是给里面的插槽 qwq
<el-table-column label="区块链查询" align="center">
<template slot-scope="scope">
<el-button class="stamp-query" @click="blockQuery(scope.row)">查询</el-button>
</template>
</el-table-column>
</el-table>
就连page都是el-pagination
2 dangerously use html 动态渲染是非常危险的 xss攻击
行了行了知道了
那我准备自己手写一个了好吧 其他部分好像都没什么事情了
看看login那边都有啥~~~
自己手写 并不复杂
(1)按钮处 改成click 之后 showmodal 变成true
(2)自己写一个大大大的mask 点击之后showmodal=false 可以吧~
<div @click="showModal=false" v-if="showModal" class="mask"></div>
<div v-if="showModal" class="dialog">
<login-register></login-register>
</div>
(3)为了让遮罩层下面的灰度看起来像是那么回事 我们要这样~
.mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(51, 51, 51, 0.7);
z-index:100;
}
.dialog {
position: absolute;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px 70px;
/*height: 400px;*/
background:rgba(248,249,255,1);
border-radius: 10px;
z-index:300;
}
最后 最后 自己加个渲染动画8
试了半天 简单的transition无效 ..
transition 是需要加上前面什么样子后面什么样子 然后你是怎么过渡转换的
存不存在于文档流之中(v-if) 仿佛就对它没用~~ 没用~
v-show 也是 你看啊 display:none 要改成visibility:hidden才可以
但是~~ 每次又一想到这个 你就觉得 这已经太多了 开始背离设计的初衷了 就像你为了一个little transition 把element-ui给自定义了那么多行 其实就是舍本逐末 qvq 越写越多的时候 直接自己手写
所以~ 直接把div放在里面 就解决了
大概是transition 只认得一个v-if吧
<transition name="fade">
<div @click="showModal=false" v-if="showModal" class="mask">
<div v-if="showModal" class="dialog">
<p>1111111111111111111111</p>
</div>
</div>
</transition>
然后是笨笨的官网的教程里面的css 完美耶
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
写js实在是太爽了. 先给自己发 弄清 then 和 catch
catch 是 先写了括号 然后看返回值 有了返回值(err) 之后 再 巴拉巴拉
catch ( err=>{
})
el-table 自定义使用slot的时候 有个地方
<el-table-column prop="keyID" label="Access Key ID" align="center"></el-table-column>
<el-table-column label="Access Key Secret" align="center">
<template slot-scope="scope">
<span v-if="scope.row.isHide">{{ scope.row.keySecret }}</span>
</template>
</el-table-column>
这里千万不能 写成this.scope
只要不是自己定义在data里面 的 就不要去添加那个this
添加之后卡了多长时间啊啊啊啊啊 整个的坏了 人坏了 坏了qvq!
跳转认证界面:
还是create 或者mouted的时候调用 ~
create是第一次来的时候用 mouted是你后来又点到的时候用
callback 是this.confirm 然后的.then
然后 注意这里的message之后 是通过callback 去给搞到的那个奇奇怪怪页面。
this.$confirm('请先去认证', '提示', {
confirmButtonText: '去认证',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '跳转认证页面!',
callback: this.$router.push({ path: '/authentication/index' })
})
==================
又继续了: 为什么 mounted也不生效! 发现原来是因为方法名字 忘记写this了qwq
要写this data里面要 methods里 相互调用也要!
写js号快乐!除了整个big布局我不知道怎么搞(因为屏幕的原因)之外 其他真的hin快乐呀
===========================
好了!现在要开始写页面之间的动画了qwq。
哦不 组长忽然来了 那我还是改前面吧qwq.
============================
我发现 get请求挺好的qwq 直接在url里传还行..... 服了服了
get是不能放参数的qwq
====================================================
好的! 不能直接去改变数据 而是........
不仅验证了arr是否存在 而且~
const arr = this.tableList
if (arr) {
arr.forEach((item, i, arr) => {
item.utime = parseTime(item.utime)
item.status = item.status === 0 ?'发起方未签': item.status === 1 ? '未生效' : item.status === 2 ? '已生效' : '作废'
})
}
========================================
这是我第五次忘记在方法调用的里面写this!!!!!
========================================
el-pagenation
红红火火恍恍惚惚 hhhhh哈哈哈哈
<el-pagination
class="page"
v-if="total > 10" // 其实这里可以直接给hide-on-single-page
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background
layout="prev, pager, next"
:total="total"
></el-pagination>
哇哈哈哈 hhhhHhh哈哈哈哈
然后 要绑定total (后端会给
change的时候直接调用就好。。。。点第几页到第几页嘛。不用+1
很方便qwq
get请求的时候直接把参数传递进去感觉还行 qwq 只要不写乱