本文共 6917 字,大约阅读时间需要 23 分钟。
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========================
好吧 顶部栏也要从顶部到底部的更新
那么设置了flexdisplay: 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 只要不写乱